角 清和 社 “ 视 频 大 谢 晤 "大 系 


网 络 开 发 视频 大 讲堂 


移动 端 PC 端 同步 学 习 ，QQ 群 / 微 信 群 随时 答疑 。 


先 观摩 ， 再 临摹 ， 高 手 案头 常备 ， 随 时 查阅 提升 。 


随 用 随 取 ， 提 升 设计 效率 ， 快 速 进 阶 开 发 高 手 行列 。 
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网 页 设计 与 
网 站 建设 


从 人 入门 到 精通 ES 更 


前 端 科技 @ 编 著 


线 上 资源 ， 方 便 快捷 海量 资源 ， 可 查 可 用 


@ 教 学 微 视频 ( 362 节 ) @ 前 端 案 例 资源 库 ( 4900 个 ) 
和 @ 拓 展 微 阅读 ( 18 项 ) 全 面试 题库 ( 1036 道 ) 

@ 在 线 微 练 习 ( 535 个 ) 全 网 页 模板 库 ( 1500 套 ) 

全 权威 参考 (13 个 ) 便 设 计 素 材 库 ( 12000 个 ) 


清华 大 学 出 版 社 


名 D 清华 社 “ 视 频 大 讲堂 ”大 系 
网络 天 发现 频 大 请 党 


网 页 设计 与 网 站 建设 从 入 门 到 精通 
( 微 课 精 编 版 ) 


前 端 科技 “编著 


内 容 简 介 


《网 页 设计 与 网 站 建设 从 入 门 到 精通 ( 微 课 精 编 版 )》 由 浅 入 深 、 通俗 易 懂 地 讲解 了 网 页 制作 和 动态 网 站 建 
设 的 相关 技术 及 实际 应 用 。 全 书 共 23 章 ,包括 HTML5 基础 、 创 建 HTMLS5 文档 设计 HTML5 结构 、 设 计 HTML5 
文本 、 设 计 HIML5 图 像 和 多 媒体 、 设 计 列表 和 链接 、 设 计 表格 、 设 计 表单 、CSS3 基础 、 使 用 CSS3 美化 网 页 
文本 和 图 像 、 使 用 CSS3 背景 图 像 和 渐变 背景 、 使 用 CSS3 美化 列表 和 超 链接 样式 、 使 用 CSS3 美化 表格 和 表单 
样式 、 使 用 CSS3 排版 网 页 、 安 装 PHP 运行 环境 、PHP 基础 、 字 符 串 操作 、 正 则 表达 式 、PHP 数组 、 在 网 页 中 
使 用 PHP、Cookie 和 Session、 访 问 MySQL 数据 库 、 设 计 技术 论坛 等 内 容 。 本 书 在 编写 过 程 中 ， 注 意 理论 与 实 
践 相 结合 , 通过 大 量 的 实例 配合 讲解 各 知识 要 点 。 各 章节 注重 实例 间 的 联系 和 各 功能 间 的 难 易 层次 ,内容 讲解 以 
文字 描述 和 图 例 并 重 , 力求 生动 易 懂 , 并 对 软件 应 用 过 程 中 的 难点 、 重 点 和 可 能 出 现 的 问题 给 予 详细 讲解 和 提示 。 

除 纸 质 内 容 外 ， 本 书 还 配备 了 多 样 化 、 全 方位 的 学 习 资 源 ， 主 要 内 容 如 下 : 


四 “362 节 同 步 教学 微 视频 回 15000 项 设计 素材 资源 
加 “18 项 拓展 知识 微 阅 读 回 4800 个 前 端 开发 案例 
回 446 个 实例 案例 分 析 回 “48 本 权威 参考 学 习 手册 
回 ”535 个 在 线 微 练习 回 1036 道 企业 面试 真题 


本 书 语言 简洁 、 内 容 丰 富 ， 适 合 网 页 设计 与 制作 人 员 、 网 站 建设 与 开发 人 员 、 大 中 专 院 校 相关 专业 师 生 、 网 
页 制作 培训 班 学 员 和 个 人 网 站 爱好 者 阅读 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 
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如 何 使 用 本 书 


本 书 提供 了 多 样 化 、 全 方位 的 学 习 资 源 ， 帮 助 读者 轻松 掌握 网 页 设计 与 网 站 建设 技术 ， 从 小 白 快 
速成 长 为 前 端 开发 高 手 。 


视频 讲解 


手机 端 +PC 端 ， 线 上 线 下 同步 学 习 
1. 获取 学 习 权限 


学 习 本 书 前 ， 请 先 乔 开 图 书 封底 的 二 维 码 涂 层 ， 使 用 手机 扫描 ， 即 可 获取 本 书 资源 的 学 习 权限 。 
再 扫描 正文 章节 对 应 的 4 类 二 维 码 ， 可 以 观看 视频 讲解 ， 阅 读 线 上 资源 ， 查 阅 权威 参考 资料 和 在 线 练 
习 提 升 ， 全 程 易 懂 、 好 学 、 速 查 、 高 效 、 实 用 。 


到 开 涂 层 ,扫描 获取 学 习 权限 | 


i 文 泉 云 盘 。 清华 社 官方 激 信号 

| 回流 回 冰 六 3 回 
到 开 涂 层 ee 
获取 二 维权 i 
[ ce 


国光 回 天 六 5 
观看 本 书 杭 频 。“ 扫 我 有 惊喜 


2. 观看 视频 讲解 

对 于 初学 者 来 说 ， 精 彩 的 知识 讲解 和 透彻 的 实例 解析 能 够 引导 其 快速 入 门 ， 轻 松 理解 和 掌握 知识 
要 点 。 本 书 中 几乎 所 有 案例 都 录制 了 视频 ， 可 以 使 用 手机 在 线 观 看 ， 也 可 以 离线 观看 ， 还 可 以 推送 到 
计算 机 上 大 屏幕 观看 。 


像 看 电影 
一 样 学 知识 


[ss ws vr 
X 文 间 云 全 -- 图 书 二 维 码 资源 管理 … 


视频 讲解 


EE 
下 载 视频 至 手机 ， 离 线 流畅 观看 


推送 视频 至 邮箱 ,随时 PC 端 观看 


可 拉 页 统计 与 网 站 建设 从 入 门 到 灶 通 (第 课 精 编 版) 


3. 拓展 线 上 阅读 


| 一 本 书 的 厚度 有 限 ， 但 掌握 一 门 技术 却 需 要 大 量 的 知识 积累 。 本 书 选择 了 那些 与 学 习 、 就 业 关系 
和 | 紧密 的 核心 知识 点 印 在 书 中 ， 而 将 大 量 的 拓展 性 知识 放 在 云 盘 上 ， 读 者 扫描 “ 线 上 阅读 ”二 维 码 ， 妈 
可 免费 阅读 数 再 页 的 前 并 开发 尝 习 交 料 获取 大 量 的 额外 知识 。 
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4. 进行 线 上 练习 


为 方便 读者 巩固 基础 知识 ,提升 实战 能 力 ， 本 书 附 赠 了 大 量 的 前 端 练 习题 目 。 读 者 扫描 各 章 最 后 
的 “在 线 练习 ” 0 alse ras lah os 


5. 查阅 权威 参考 资料 
0 通过 大 量 查 阅 ， 真 正 领悟 技术 内 涵 。 


The Current State of 


a The Current State of HTML5 
Forms 
Lats eplorethe dfferert features of ATMLS farms 
[oh 
天 池 : 
中 
The introduction 
权威 参考 _ 


mailsiaoaaiastealiasrina he ceaee tat eeb pesaeatiadiaiau 


册 何 使 用 本 书 如 | 

6. 其 他 PC 端 资源 下 载 方式 | 
除了 前 面 介绍 过 的 可 以 直接 将 视频 、 拓 展 阅读 等 资源 推送 到 邮箱 之 外 ， 还 提供 了 如 下 几 种 PC 六 | | 
资源 获取 方式 。 | 


回 “登录 清华 大 学 出 版 社 官方 网 站 (wwwtup comen)， 在 对 应 图 书页 面 下 查找 资源 的 下 载 方式 。 
回 “申请 加 入 QQ 群 、 微 信 群 ， 获 得 资源 的 下 载 方式 。 
扫描 图 书 封 底 “ 文 泉 云 盘 ” 二 维 码 ， 获 得 资源 的 下 载 方式 。 


小 白 学 习 电子 书 


为 方便 读者 全 面 提升 ， 本 书 赠送 了 小 白 学 习 “ 前 端 开发 百 问 百 答 ”电子 书 。 并 这 和 | 
成 为 您 学 习 路 上 的 好 帮手 ， 关 键 时 刻 解 您 所 需 。 


前 端 开发 百 问 百 答 


从 小 白 到 高 手 的 昱 变 


谷歌 的 创始 人 拉 里 。 佩 奇 说 过 ， 如 果 你 刻意 练习 某 件 事 超过 10000 个 小 时 ,那么 你 就 | 
界 级 。 

因此 ,不 管 你 现在 是 怎样 的 前 六 开发 小 白 ， 只 要 您 接着 下 面 的 步 玉 学 习 ， 假 以 时 日 您 会 成 为 
令 自 己 惊 讶 的 技术 大 咖 。 

(1) 扎实 的 基础 知识 + 大 量 的 中 小 实例 训练 + 有 针对 性 地 做 一 些 综合 案例 。 

(2) 大 量 的 项 目 案例 观摩 、 学 习 、 操 练 ， 塑 造 一 定 的 项 目 思维 。 

(3) 善于 借用 他 山 之 石 ， 对 一 些 成 熟 的 开源 代码 、 设 计 素 材 拿 来 就 用 ， 学 会 站 在 巨人 的 肩膀 上 。 

(4) 有 工夫 多 参阅 一 些 官方 权威 指南 ， 拓 展 自己 对 技术 的 理解 和 应 用 能 力 。 

(5) 最 为 重要 的 是 ， 多 与 同行 交流 ， 在 切磋 中 不 断 进 步 。 

书本 厚度 有 限 ， 学 习 空间 无 限 。 纸 张 价格 有 限 ， 知 识 价值 无 限 。 希 望 本 书 能 帮 您 真正 收获 学 习 的 
乐趣 和 知识 。 最 后 ， 祝 您 阅读 快乐 ! 


人 
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“网 络 开 发 视频 大 讲堂 ”系列 从 书 于 2013 年 5 月 出 版 ， 因 其 编写 细腻 、 讲 解 透彻 、 实 用 易学 、 
配备 全 程 视频 等 ， 备 受 读者 欢迎 。 从 书 累计 销售 近 20 万 册 ， 其 中 ，《HTML5+CSS3 从 入 门 到 精通 》 
累计 销售 10 万 册 。 同 时 ， 系 列 书 被 上 百 所 高 校 选 为 教学 参考 用 书 。 

本 次 改版 ， 在 继承 前 版 优点 的 基础 上 ， 进 一 步 对 图 书 内 容 进行 了 优化 ， 选 择 面试 、 就 业 最 急需 的 
内 容 ， 重 新 录制 了 视频 ,同时 增加 了 许多 当前 流行 的 前 端 技术 ,提供 了 “入 门 学 习 一 实例 应 用 一 项 目 
开发 一 能 力 测试 一 面试 ”等 各 个 阶段 的 海量 开发 资源 库 ， 实 战 容量 更 大 ， 以 帮助 读者 快速 掌握 前 端 开 
发 所 需要 的 核心 精 血 内 容 。 

网 站 开发 涉及 的 知识 非常 多 ， 要 在 短 时 间 内 完全 掌握 几乎 是 不 可 能 的 。 但 是 ， 作 为 一 个 合格 的 前 
端 开 发 人 员 ， 必 须 对 这 些 所 涉及 的 知识 有 所 了 解 ， 掌 握 其 中 的 重要 部 分 ， 例 如 HIML 语言 、CSS 样 
式 表 、JavaScript 脚本 语言 、PHP 后 台 开发 语言 等 。 这 些 都 是 网 站 开发 人 员 的 基本 功 。 

学 习 网 页 制作 ， 仅 靠 一 个 工具 和 一 点 语言 基础 是 不 够 的 ， 实 战 是 巩固 网 站 开发 最 重要 的 一 环 。 本 
书 除 技术 讲解 非常 基础 外 , 案例 实践 也 非常 贴近 实际 的 网 站 开发 。 读 者 通过 学 习 本 书 中 各 章节 的 知识 ， 
将 会 对 网 站 开发 所 涉及 的 技术 有 比较 全 面 的 了 解 ， 基 本 上 胜任 一 般 的 网 站 开发 任务 。 掌 握 好 本 书 中 的 
知识 ， 将 为 今后 进一步 提高 实战 水 平 打下 坚实 的 基础 。 


本 书 内 容 


ml 


HIMLS 基础 
HTML5 文档 
| HIMLS 结构 
HTML5 文本 标识 


HIMLS 图 像 和 多 媒体 
HIMLS 列表 和 超 链接 
HIMLS 表格 
HIML5 表单 


CSS3 基础 
CSS3 文本 和 图 像样 式 
CSS3 背景 图 像 和 渐变 样式 


CSS3 CSS3 列表 和 超 链接 样式 
CSS3 表格 和 表单 样式 阅 放 
CSS3 排版 网 页 
PHP 运行 环境 安装 
PHP 基础 
ee 
PHP 使 用 正则 表达 式 sa 


使 用 PHP 数组 

使 用 PHP 与 用 户 交互 
使 用 Cookie 和 Session 
访问 MySQL 数据 库 
综合 实战 : 设计 技术 论坛 


砚 贡 设计 与 网 站 建设 从 入 门 到 糙 通 ( 币 课 精 编 版 ) 


本 书 特点 


人 由 浅 入 深 , 编排 合理 ， 实 用 易学 


冉 胃 |。 术 书 系统 地 讲解 了 HTML5+CSS3+PHP 技 术 在 网 页 设计 中 各 个 方面 应 用 的 知识 ， 从 为 什么 要 用 
HTrMES 开 始 讲解 ， 循 序 渐进 ， 配 合 大 晶 实 例 ， 帮 助 读者 疯 定 坚实 的 理论 基础 ， 做 到 知 其 所 以 然 ， 


SA 天。 ;， 趴 着 案例 和 视频 学 ， 入 门 更 容易 
跟着 例子 学 习 ， 通 过 训练 提升 ， 是 初学 者 最 好 的 学 习 方式 。 本 书 案例 丰富 详尽 ， 共 400 多 个 ， 且 
| 都 附 有 详尽 的 代码 注释 及 清晰 的 视频 讲解 。 跟 着 这 些 案例 边 做 边 学 ， 可 以 避免 学 到 的 知识 流 于 表面 、 
| 限于 理论 ， 尽 情感 受 编程 带 来 的 快乐 和 成 就 感 。 
| 3. 4 大 类 线 上 资源 ， 多 元 化 学 习 体验 
为 了 传递 更 多 知识 ， 本 书 力求 突破 传统 纸 质 书 的 厚度 限制 。 本 书 提供 了 4 大 类 线 上 微 资源 ， 通 过 
| 手机 扫 码 ， 读 者 可 随时 观看 讲解 视频 ， 拓 展 阅读 相关 知识 ， 在 线 练习 强化 提升 ， 还 可 以 查阅 官方 权威 
| 资料， 全程 便 捷 、 高 效 ， 感 受 不 一 样 的 学 习 体验 。 
| 4. 精彩 栏目 ， 易 错 点 、 重 点 、 难 点 贴心 提醒 
| 本 书 根据 初学 者 特点 ， 在 一 些 易 错 点 、 重 点 、 难 点 位 置 精心 设置 了 “注意 ”“ 提 示 ” 等 小 栏目 。 
| 通过 这 些小 栏目 ， 读 者 会 更 留心 相关 的 知识 点 和 概念 ， 绕 过 陷阱 ， 掌 握 很 多 应 用 技巧 。 


本 书 资源 


362 节 同步 微 视频 
18 项 拓展 微 阅读 


快速 掌握 前 端 开发 精 峙 


327 项 源 代码 资源 
| EE PSD 网 页 分 层 模板 ( 426 套 ) 

设计 素材 大 全 ( 17 类 ，10000 个 ) 

网 页 配色 工具 箱 ( 600 个 ) 

网 页 模板 大 全 (632 套 ) 

JavaScript 网 页 特效 大 全 ( 24 套 ) 

Bootstrap 网 页 模板 (500 套 ) 拿 来 就 用 ， 提 升 速度 
Photoshop 设计 大 全 ( 18 类 ，2000 个 ) 

| 历史 经 典 网 页 欣赏 (508 例 ) 


网 页 设计 初级 示例 大 全 (49 例 ) 
网 页 应 用 分 类 案例 大 全 ( 1600 例 ) 
HTML5+CSS3+JavaScript 实用 案例 大 全 | 
(3200 例 ) 


PHP、MySQL 参考 手册 (5 册 ) 
9 本 CSS 参考 手册 

10 本 HTML 参考 手册 

| 23 本 JavaScript 参考 手册 
| 1 本 Photoshop 学 习 手 册 


HIML、CSS 面试 题 (351 题 ) 
JavaScript 面试 题 ( 685 题 ) 
前 端 开发 /设计 面试 经 验 


专项 专 练 ， 身 经 百 战 


打造 超 强 就 业 能 力 


回 ”具备 一 定 计算 机 操作 基础 的 初学 者 。 
回 ”具有 一 定 网 站 开发 经 验 的 初 、 中 级 用 户 。 


ssVI。 


前 言 3 


立志 从 事 网 站 开发 工作 的 从 业 人 员 。 
自学 网 页 设计 或 网 站 开发 的 大 中 专 学 生 。 

各 类 网 站 站 长 。 

本 书 也 可 以 作为 各 大 中 专 院 校 相关 专业 的 教学 辅导 和 参考 用 书 ， 或 作为 相关 培训 机 构 的 培 全 
训 教材 。 ~ 


读 前 须知 


本 书 从 初学 者 的 角度 出 发 ， 通 过 大 量 的 案例 使 学 习 不 再 枯燥 、 教 条 。 因 此 要 求 读者 边 学 习 边 实践 
操作 ， 避 免 学 习 的 知识 流 于 表面 、 限 于 理论 。 

作为 入 门 书籍 ， 本 书 知识 点 比较 庞杂 ， 所 以 不 可 能 面面俱到 。 技 术 学 习 的 关键 是 方法 ， 本 书 在 很 
多 实例 中 体现 了 方法 的 重要 性 , 读者 只 要 掌握 了 各 种 技术 的 运用 方法 , 在 学 习 更 深入 的 知识 中 可 大 大 
提高 自学 的 效率 。 

本 书 提供 了 大 量 示 例 ， 需 要 用 到 下 、Firefox、Chrome 等 主流 浏览 器 的 测试 和 预览 ， 同 时 还 要 用 
到 PHP 测试 环境 。 因此， 为 了 测试 示例 或 代码 ， 读 者 需要 安装 最 新 版 本 浏览 器 ， 各 种 浏览 器 在 CSS3 
的 表现 上 可 能 会 稍 有 差异 ， 并 根据 书 中 详细 介绍 安装 PHP 测试 环境 。 

限于 篇 幅 ， 本 书 示例 没有 提供 完整 的 HIML 代码 ， 读 者 应 该 补充 完整 的 HTML 结构 ， 然 后 进行 
测试 练习 ， 或 者 直接 参考 本 书 提供 的 下 载 源 代码 ， 边 学 边 练 。 

为 了 给 读者 提供 更 多 的 学 习 资 源 ， 本 书 提供 了 很 多 参考 链接 , 许多 本 书 无 法 详细 介绍 的 问题 都 可 
以 通过 这 些 链接 找到 答案 。 由 于 这 些 链接 地 址 会 因 时 间 而 有 所 变动 或 调整 ， 所 以 在 此 说 明 ， 这 些 链接 | 
地 址 仅 供 参考 ， 本 书 无 法 保证 所 有 的 这 些 地 址 是 长 期 有 效 的 。 


读者 服务 


学 习 本 书 时 ， 请 先 扫描 封底 的 权限 二 维 码 ( 需 要 刊 开 涂 层 ) 获取 学 习 权限 ， 然 后 即 可 免费 学 习 书 | 
中 的 所 有 线 上 线 下 资源 。 | 
本 书 所 附 赠 的 超 值 资源 库 内 容 ， 读 者 可 登录 清华 大 学 出 版 社 网 站 (wwwtup.comcn)， 在 对 应 图 | 
书页 面 下 获取 其 下 载 方式 。 也 可 扫描 图 书 封底 的 “ 文 泉 云 盘 ”二 维 码 ， 获 取 其 下 载 方式 。 | 
本 书 提供 QQ 群 (668118468 、697651657) 、 微 信 公 众 号 〈qianduankaifa cn )、 服 务 网 站 | 
Cwwwqianduankaifacn) 等 互动 渠道 ， 提 供 在 线 技术 交流 、 学 习 答 疑 、 技 术 资讯 、 视 频 课 堂 、 在 线 | 
勘误 等 功能 。 在 这 里 ， 您 可 以 结识 大 量 志同道合 的 朋友 ， 在 交流 和 切磋 中 不 断 成 长 。 | 
读者 对 本 书 有 什么 好 的 意见 和 建议 , 也 可 以 通过 邮箱 (qianduanjiaoshi@163.com) 发 邮件 给 我 们 。 
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HTML5 基础 


2014 年 10 月 28 日 ，W3C 的 HTML 工作 组 发 布 了 HTMLS 的 正式 推荐 标准 。HTML5 
是 构建 开放 Web 平台 的 核心 ， 是 万 维 网 的 核心 语言 : 可 扩展 标记 语言 的 第 5 版 。 在 这 一 版 
本 中 ,增加 了 支持 Web 应 用 的 许多 新 特性， 以 及 更 符合 开发 者 使 用 习惯 的 新 元 素 ， 并 重点 
关注 定义 清晰 的 、 一 致 的 准则 ， 以 确保 Web 应 用 和 内 容 在 不 同 浏 览 器 中 的 互 操作 性 。 

本 章 将 对 HTMLS 进行 简单 概述 ， 对 于 继承 自 HTMIL4 的 类 部 分 内 容 就 不 再 次 述 ， 有 关 
HTML5 API 部 分 将 在 后 面 各 章 中 逐一 展开 讲解 

权威 参考 : http://www.w3.org/TR/html5/ 


【 学 习 重 点 】 
MH 了 解 HTML 版 本 和 HTMLS5 开发 历史 全 
WH 了 解 HTML5 设计 理念 

MH 了 解 HIML5API 
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1.1 _ HTMLS 概述 


侠 
从 2010 年 开始 ，HTML5 和 CSS3 就 一 直 是 网 络 世界 最 受 追 捧 的 技术 热点 。 以 HTML5+CSS3 为 
M3 搬 主 的 网 络 时 代 ， 使 互联 网 进入 一 个 崭新 的 发 展 阶段 。 


11.1 HTML 历史 


HTML 从 诞生 至 今 ， 经 历 了 近 30 年 的 发 展 ， 其 中 经 历 的 版 本 及 发 布 日 期 如 表 1.1 所 示 。 
表 1.1 HTML 语言 的 发 展 过 程 


疱 提示 ， 从 上 面 HTML 发 展 列表 来 看 ，HTML 没有 1.0 版 本 ， 这 主要 是 因为 当时 有 很 多 不 同 的 版 
本 。 有 些 人 认为 Tim Berners-Lee 的 版 本 应 该 算 初版 ， 但 他 的 版 本 中 还 没有 img 元 素 ， 也 
就 是 说 ，HTML 刚 开始 时 仅 能 够 显示 文本 信息 。 


| 版 ”本 发 布 日 期 说 了 明 

Ws ”| 1993 年 6 月 作为 互联 网 工程 工作 小 组 (IETF) 工作 草案 发 布 ， 非 标准 
a 1595 年 下 月 wii 
| HTML 3.2 1996 年 1 月 14 日 | W3C 推荐 标准 

| _HIML40 1997 年 12 月 18 日 | W3C 推荐 标准 

| _HTML401 1999 年 12 月 24 日 | 微小 改进 ，W3C 推荐 标准 

证 ee 基 于 严格 的 HTML 4.01 语法 ， 是 国际 标准 化 组 织 和 国际 电工 委员 会 
| 的 标准 

| XHTML 1.0 2000 年 1 月 26 日 | W3C 推荐 标准 ， 修 订 后 于 2002 年 8 月 1 日 重新 发 布 

| _XHTML1L1 2001 年 5 月 31 日 | 较 1.0 版 本 有 微小 改进 

| _ XHTML 2.0 草案 | 没有 发 布 2009 年 ，W3C 停止 了 XHTML 2.0 工作 组 的 工作 

| _HTMLS 草 案 。 | 2008 年 1 月 HTML5 规范 先是 以 草案 发 布 ， 经 历 了 漫长 的 过 程 

| _HTML5 2014 年 10 月 28 日 | W3C 推荐 标准 

| HIML 5.1 2017 年 10 月 3 日 | W3C 发 布 HTML5 第 1 个 更 新 版 本 (http://www.w3.org/TR/html51/) 
| HTML 5.2 2017 年 12 月 14 日 | W3C 发 布 HIMLS 第 2 个 更 新 版 本 (http://www.w3.org/TR/html52/) 
| HIML 5.3 2018 年 3 月 15 日 | W3C 发 布 HTML5 第 3 个 更 新 版 本 (http:/www.w3.org/TR/html53/) 


1.1.2 HTML5 特性 


下 面 简单 介绍 HIMLS 特征 和 优势 ， 以 便 提高 读者 自学 HTMLS 的 动力 和 目标 。 

1. 兼容 性 

考虑 到 互联 网 上 HIML 文档 已 经 存在 20 多 年 了 ， 因 此 支持 所 有 现存 HTML 文档 是 非常 重要 的 。 
HIML5 不 是 颠覆 性 的 革新 ， 它 的 核心 理念 就 是 要 保持 与 过 去 技术 的 兼容 和 过 渡 。 一 旦 浏览 器 不 支持 
HTMLS5 的 某 项 功能 ， 针 对 该 功能 的 备 选 行为 就 会 悄悄 运行 。 


。2。 
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2. 实用 性 


HTMLS5 新 增加 的 元 素 都 是 对 现 有 网 页 和 用 户 习 惯 进行 跟踪 、 分 析 和 概括 而 推出 的 。 例如 , Google ， 
分 析 了 上 百 万 的 页 面 ， 从 中 分 析出 了 DIV 标签 的 通用 ID 名 称 ， 并 且 发 现 其 重复 量 很 大 ， 如 很 多 开发 
人 员 使 用 <div id="header"> 来 标记 页 眉 区 域 , 为 了 解决 实际 问题 , HTMLS5 就 直接 添加 一 个 <header> 标 | 
签 。 也 就 是 说 ，HTMLS 新 增 的 很 多 元 素 、 属 性 或 者 功能 都 是 根据 现实 互联 网 中 已 经 存在 的 各 种 应 用 ， 


进行 技术 精炼 ， 而 不 是 在 实验 室 中 进行 理想 化 的 虚构 新 功能 。 
3. 效率 


HTMLS 规范 是 基于 用 户 优先 的 原则 编写 的 ， 其 宗旨 是 用 户 即 上 帝 ， 这 意味 着 在 遇 到 无 法 解决 的 
冲突 时 ， 规 范 会 把 用 户 放 到 第 一 位 ， 其 次 是 页 面 制作 者 ， 再 次 是 浏览 器 解析 标准 ， 接 着 是 规范 制定 者 | 
(如 W3C、WHATWG)， 最 后 才 考虑 理论 的 纯粹 性 。 因 此 ，HTML5 的 绝 大 部 分 是 实用 的 ， 只 是 有 些 | 


情况 下 还 不 够 完美 。 例 如 ， 下 面 的 几 种 代码 写法 在 HIMLS 中 都 能 被 识别 。 
id="prohtml5" 
id=prohtml5 
ID=wprohtmls， 


当然 ， 上 面 几 种 写法 比较 混乱 ， 不 够 严谨 ， 但 是 从 用 户 开发 角度 考虑 ， 用 户 不 在 乎 代码 怎么 写 ， 


根据 个 人 书写 习惯 反而 提高 了 代码 编写 效率 。 
4. 安全 性 


为 保证 足够 安全 ，HTML5 引入 了 一 种 新 的 基于 来 源 的 安全 模型 ， 该 模型 不 仅 易 用 ， 而 且 对 各 种 
不 同 的 API 都 通用 。 这 个 安全 模型 可 以 不 需要 借助 于 任何 所 谓 聪明 、 有 创意 却 不 安全 的 hack 就 能 跨 | 


域 进行 安全 对 话 。 
5. 分 离 


在 清晰 分 离 表现 与 内 容 方 面 ，HTML5 迈 出 了 很 大 的 步伐 。HTML5 在 所 有 可 能 的 地 方 都 努力 进行 


了 分 离 ， 包 括 HTML 和 CSS。 实际 上 ，HTMLS 规范 已 经 不 支持 老 版 本 HIML 的 大 部 分 表现 功能 。 
6. 简化 

HTMLS 要 的 就 是 简单 、 避 免 不 必 要 的 复杂 性 。HTMLS 的 口号 是 : 简单 至 上 ， 尽 可 能 简化 。 
HTML5 做 了 以 下 改进 。 

以 浏览 器 原生 能 力 替 代 复 杂 的 JavaScript 代码 。 

回 简化 的 DOCTYPE。 

简化 的 字符 集 声明 。 

简单 而 强大 的 HIMLS API。 

7. 通用 性 

通用 访问 的 原则 可 以 分 成 3 个 概念 。 


革 


回 “可 访问 性 : 出 于 对 残障 用 户 的 考虑 ，HITMLS5 与 WAI (Web 可 访问 性 倡议 ) 和 ARIA (可 访 
问 的 富 Intemet 应 用 ) 做 到 了 紧密 结合 ，WALARIA 中 以 屏幕 阅读 器 为 基础 的 元 素 已 经 被 添 


加 到 HIML 中 。 
回 ”媒体 中 立 : 如 果 可 能 的 话 ，HTMLS 的 功能 在 所 有 不 同 的 设备 和 平台 上 应 该 都 能 正常 运行 。 
回 ”支持 所 有 语种 : 如 新 的 <ruby> 元 素 支持 在 东亚 页 面 排版 中 会 用 到 的 Ruby 注释 。 


.3。 
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8. 无 插件 
”在 传统 Web 应 用 中 ， 很 多 功能 只 能 通过 插件 或 者 复杂 的 hack 来 实现 ， 但 在 HTMLS 中 提供 了 对 
。 ”这 些 功能 的 原生 支持 。 插 件 的 方式 存在 以 下 问题 。 
狠 | ” ”名 插件 安装 可 能 失败 。 
zo 回 插件 可 以 被 禁用 或 屏蔽 ， 如 Flash 插件 。 
项。 回 插件 自身 会 成 为 被 攻击 的 对 象 。 
”加 “插件 不 容易 与 HTML 文档 的 其 他 部 分 集成 ， 因 为 插件 边界 、 剪 裁 和 透明 度 问题 。 


| 以 HIML5 中 的 canvas 元 素 为 例 ， 有 很 多 非常 底层 的 事情 以 前 是 没 办 法 做 到 的 ， 如 在 HTML4 的 
| 页 面 中 就 难 画 出 对 角 线 ， 而 有 了 canvas 就 可 以 很 轻易 地 实现 了 。 基 于 HTMLS5 的 各 类 API 的 优秀 设 
| 计 ， 可 以 轻松 地 对 它们 进行 组 合 应 用 。 例 如 ， 从 video 元 素 中 抓 取 的 帧 可 以 显示 在 canvas 里 面 ， 用 户 
| 点 击 canvas 即 可 播放 这 帧 对 应 的 视频 文件 。 

最 后 ， 用 万 维 网 联盟 创始 人 Tim Bermers-Lee 的 评论 来 做 小 结 ,“ 今 天 ， 我 们 想 做 的 事情 已 经 不 再 
| 是 通过 浏览 器 观看 视频 或 收听 音频 ， 或 者 在 一 部 手机 上 运行 浏览 器 。 我 们 希望 通过 不 同 的 设备 ,在 任 
| 何 地 方 ， 都 能 够 共享 照片 、 网 上 购物 、 阅 读 新 闻 以 及 查找 信息 。 虽 然 大 多 数 用 户 对 HTML5 和 开放 
Web 平台 (Open Web Platform，OWP) 并 不 熟悉 ， 但 是 它们 正在 不 断 改进 用 户 体验 ”。 


| 回 必 回回 & 

1 1.1.3 浏览 器 检测 i 4 

| i 

| HTMLS5 发 展 的 速度 非常 快 ， 因 此 不 用 担心 浏览 器 的 支持 问题 。 用 国光 入 六 二 。 回 汪 5 和 
| 户 可 以 访问 www.caniuse.com 网 站 ， 该 网 站 按照 浏览 器 的 版 本 提供 了 详 。。。 “权威 允 考 { 。。” 权威 参考 2 


| 尽 的 HTML5 功能 支持 情况 。 

| 如 果 通 过 浏览 器 访问 www.html5test.com, 该 网 站 会 直接 显示 用 户 浏览 器 对 HTML5 规范 的 支持 情 
| 况 。 另外, 还 可 以 使 用 Modemizr (JavaScript 库 ) 进行 特性 检测 , 它 提供 了 非常 先进 的 HTML5 和 CSS3 
| 检测 功能 。 建 议 使 用 Modemizr 检测 当前 浏览 器 是 否 支持 某 些 特性 。 


1.2 HTMLS 基本 语法 


| HTML5 以 HTML4 为 基础 ， 对 HTML4 进行 了 全 面 升级 改造 。 与 HTML4 相 比 ，HTMLS5 在 语法 
| 上 有 很 大 的 变化 ， 具 体 说 明 如 下 。 


1.2.1 文档 和 标记 


1. 内 容 类 型 


HIMLS 的 文件 扩展 名 和 内 容 类 型 保持 不 变 。 例 如 ， 扩 展 名 仍然 为 .html 或 .htm， 内 容 类 型 
(ContentType) 仍然 为 text/html。 


2. 文档 类 型 
在 HIML4 中 ， 文 档 类 型 的 声明 方法 如 下 。 


| <!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/ 
|， xhtmll-transitional.dtd"> 


在 HIML5 中 ， 文 档 类 型 的 声明 方法 如 下 。 
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<!DOCTYPE html> 
当 使 用 工具 时 ， 也 可 以 在 DOCTYPE 声明 中 加 入 SYSTEM 识别 符 ， 声 明 方法 如 下 。 


<IDOCTYPE HTML SYSTEM "aboutlegacy-compat"> 


| 国门 
在 HTML5 中 ，DOCTYPE 声明 方式 是 不 区 分 大 小 写 的 ， 引 号 也 不 区 分 是 单 引 号 还 是 双 引 号 。 | 


爷 注意 : 使 用 HIML5 的 DOCTYPE 会 触发 浏览 器 以 标准 模式 显示 页 面 。 众 所 周知 ， 网 页 都 有 多 种 ， 
显示 模式 ， 如 怪异 模式 (Quirks ) 、 标 准 模式 (Standards ) 。 浏 览 器 根据 DOCTYPE 来 识 
别 该 使 用 哪 种 解析 模式 。 | 


3. 字符 编码 
在 HIML4 中 ， 使 用 meta 元 素 定义 文档 的 字符 编码 ， 如 下 所 示 。 
<meta http-equiv="Content-Type" content="text/html:charset=UTF-8"> | 
在 HTML5 中 ， 继 续 沿用 meta 元 素 定义 文档 的 字符 编码 ， 但 是 简化 了 charset 属性 的 写法 ， 如 下 
所 示 。 
<meta charset="UTF-8"> | 
对 于 HTMLS5 来 说 ， 上 述 两 种 方法 都 有 效 ， 用 户 可 以 继续 使 用 前 面 一 种 方式 ， 即 通过 content 元 
素 的 属性 来 指定 ， 但 是 不 能 同时 混用 两 种 方式 。 | 
你) 注意: 在 传统 网 站 中 ， 可 能 会 存在 下 面 标记 。 在 HTMLS 中 ， 这 种 字符 编码 方式 将 被 认为 是 错 | 
误 的 。 | 
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html:charset=UTF-8"> 
从 HIML5 开始 ， 对 于 文件 的 字符 编码 推荐 使 用 UTF-8。 
1.2.2 ”宽松 的 约定 
HTML5 语法 是 为 了 保证 与 之 前 的 HTML4 语法 达到 最 大 程度 的 兼容 而 设计 的 。 
1， 标 记 省 略 | 坑 频 讲 
在 HIML5 中 ， 元素 的 标记 可 以 分 为 3 种 类 型 : 不 允许 写 结束 标记 、 可 以 省 略 结束 标记 、 开 始 标 | 
记 和 结束 标记 全 部 可 以 省 略 。 下 面 简单 介绍 这 3 种 类 型 各 包括 哪些 HTMLS5 新 元 素 。 | 
(1) 不 允许 写 结束 标记 的 元 素 有 : area、 base、 br、 col、 command、 embed、 hr、 img、 input、 keygen、 | 
link、 meta、param、source、track、wbr。 
(2) 可 以 省 略 结束 标记 的 元 素 有 : li、dt、dd、p、tt、1p、optgroup、option、colgroup、thead、 
tbody、ttoot、tr、td、 也 。 
(3) 可 以 省 略 全 部 标记 的 元 素 有 : html、head、body、colgroup、tbody。 
浴 提示 : 不 允许 写 结束 标记 的 元 素 是 指 ， 不 允许 使 用 开始 标记 与 结束 标记 将 元 素 括 起 来 的 形式 ， 只 
允许 使 用 < 元 素 /> 的 形式 进行 书写 ， 如 下 所 示 。 
错误 的 书写 方式 。 
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正确 的 书写 方式 。 
<br/> 


到 HTML5 之 前 的 版 本 中 ，<br> 这 种 写法 可 以 继续 沿用 。 
| 可 以 省 略 全 部 标记 的 元 素 是 指 元 素 可 以 完全 被 省 略 。 注 意 ， 该 元 素 还 是 以 隐 式 的 方式 存在 
| 的 。 例 如 ， 将 body 元 素 省 略 时 ， 但 它 在 文档 结构 中 还 是 存在 的 ， 可 以 使 用 documentbody 
进行 访问 。 
2. 布尔 值 
| 对 于 布尔 型 属性 ， 如 disabled 与 readonly 等 ， 当 只 写 属性 而 不 指定 属性 值 时 ,表示 属性 值 为 tme; 
| 如 果 属 性 值 为 false， 可 以 不 使 用 该 属性 。 另 外 ， 要 想 将 属性 值 设 定 为 tue 时 ， 也 可 以 将 属性 名 设 定 
| 为 属性 值 ， 或 将 空 字符 串 设 定 为 属性 值 。 
| 【示例 1】 下 面 是 几 种 正确 的 书写 方法 。 
<!-- 只 写 属性 ， 不 写 属性 值 ， 代 表 属 性 为 tue--> 
<input type="checkbox" checked> 
<!-- 不 写 属性 ， 代 表 属 性 为 false--> 
<input type="checkbox"> 
<!-- 属 性 值 = 属性 名 ， 代 表 属 性 为 tue--> 
<input type="checkbox" checked="checked"> 


<!-- 属 性 值 = 空 字符 串 ， 代 表 属 性 为 true--> 
<input type="checkbox" checked=""> 


3. 属性 值 
| 属性 值 可 以 加 双 引 号 ， 也 可 以 加 单 引 号 。HTML5 在 此 基础 上 做 了 一 些 改进 ， 当 属性 值 不 包括 空 
| 字符 串 、<、>、=、' ( 单 引 号 )、"( 双 引号 ) 等 字符 时 ， 属 性 值 两 边 的 引号 可 以 省 略 。 
【示例 2】 下 面 写法 都 是 合法 的 。 
<input type="text"> 
<input type='text> 
<input type=text> 


创建 HTML5 文档 


随 着 互联 网 技术 的 推陈出新 ， 网 页 变 得 越 来 越 复 杂 ， 但 是 其 底层 技术 相当 简单 。 创 建 网 
页 离 不 开 HIML，HTML 是 构建 网 页 结构 的 基础 。 本 章 将 从 零 起 步 ， 帮 助 读者 轻松 路 入 


HIMLS 的 门楼 ， 


【 学 习 重 点 】 


dl 


至 至 至 


熟悉 基本 的 HIML 页 面 结构 
认识 标记 、 元 素 、 属 性 和 值 
了 解 网 页 文本 内 容 

了 解 文 件 名 
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2.1 HTML5 基本 结构 


A HTML 是 一 种 标记 语言 ,不 是 编程 语言 。 标 记 内 容 需 要 由 元 素 定义 ,元 素描 述 内 容 是 什么 ,而 非 


内 容 的 显示 效果 。 


| 2.1.1 新 建 网 页 文档 


| 完整 的 HTML 文档 应 该 包含 两 部 分 结构 : 头 部 信息 (<head>) 和 主体 内 容 (<body>)。 为 了 使 网 
| 页 内 容 更 加 清晰 、 明 确 ， 容 易 被 他 人 阅读 ， 或 者 被 浏览 器 以 及 各 种 设备 所 理解 ， 新 建 HIMLS 文档 之 
| 后， 需要 构建 基本 的 网 页 结构 。 
| 【示例 】 使 用 记事 本 新 建 一 个 文本 文件 ， 保 存 为 index.html， 然 后 输入 下 面 多 行 字符 。 注 意 ， 扩 
| 展 名 为 html， 而 不 是 .txt。 
| <!IDOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="utf-8" /> 

<title> 网 页 标题 </title> 

</head> 

<body> 

</body> 

</html> 
| 通过 上 面 代码 , 可 以 看 到 每 个 网 页 都 由 固定 的 结构 
| 开始 构建 。 这 个 HTML 相当 于 一 张 白 纸 ， 因 为 访问 者 
”看 到 的 内 容 位 于 主体 部 分 〔 即 <body> 和 </body> 之 间 的 
| 部 分 )， 而 这 一 部 分 现在 是 空 的 ， 如 图 2.1 所 示 。 
| 每 个 网 页 都 包含 DOCTYPE、html、head 和 body 
| 元素， 它们 是 网 页 的 基础 。 在 这 个 页 面 中 ， 可 以 定制 的 图 2.1 空白 页 面 
| 内 容 包括 两 项 :一 是 设置 lang 属性 的 语言 代码 ， 二 是 
| <tittle> 和 </title> 之 间 的 文字 。HTML 使 用 “<” 和 “>” 字 符 包 围 HIML 标签 。 开 始 标签 (如 <head>) 
用 于 标记 元 素 的 开始 , 结束 标签 (如 </head>) 用 于 标记 元 素 的 结束 。 有 的 元 素 没 有 结束 标签 , 如 meta。 


， 次 提示 ， 如 果 使 用 专业 网 页 编辑 器 ， 如 Dreamweaver 等 ， 新 建 网 页 文件 时 ， 它 会 自动 帮助 完成 上 
面 代码 的 输入 。 


| 4 注意 : 除了 基本 结构 外 ， 一 般 网 页 者 包括 以 下 3 部 分 内 容 。 
回 文本 内 容 : 在 页 面 上 让 访问 者 了 解 页 面 内 容 的 纯 文 字 ， 如 关于 产品 、 资 讯 的 内 容 ， 以 
及 其 他 任何 内 容 。 
回 外 部 引用 : 使 用 这 些 引用 来 加 载 图 像 、 音 频 、 视 频 文件 ， 以 及 样式 表 (控制 页 面 的 显 
示 效 果 ) 和 JavaSetipt 文件 (为 页 面 添加 行为 ) 。 这些 引 用 还 可 以 指向 其 他 的 HTML 
页 面 和 资源 
回 标记 : 对 文本 内 容 进行 开 述 ， 并 确保 浏览 器 能 够 正确 显示 。 提示 ，HTML 一 词 中 的 字 
母 M 就 代表 标记 。 
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每 一 个 HTML 页 面 的 开头 部 分 , 还 会 包含 一 些 信息 ,主要 用 于 浏览 器 和 搜索 引擎 (如 百度 、Google | 
等 ) 的 解析 。 浏 览 器 不 会 将 这 些 信息 呈现 给 访问 者 。 
网 页 内 容 都 由 文本 构成 ， 因 此 网 页 可 以 保存 为 纯 文本 格式 ， 可 以 在 任何 平台 上 使 用 任何 浏览 器 

查看 ， 无 论 是 台式 机 、 手 机 、 平 板 电脑 ， 还 是 其 他 平台 。 这 个 特性 也 确保 了 用 户 很 容易 创建 HIML 。 Ey 办 
页 面 。 | ~ 
总 提 示 : 本 书 使 用 HTML 泛 指 这 门 语言 本 身 。 如 果 需 要 突出 HTML 某 一 版 本 独 有 的 特殊 属性 ， 则 | 

使 用 它们 各 自 的 名 称 . 例如 ， HTML5 引入 了 一 些 新 的 元 素 ， 并 重新 定义 或 删除 了 HIML4 ， 

和 XHTML 1.0 中 的 某 些 元 素 。 | 


2.1.2 ”网 页 头 部 信息 


完整 的 HTML 文档 应 该 包含 如 下 两 部 分 结构 。 

回头 部 信息 (<head>) 。 

回 主体 内 容 (<body>) 。 

页 面 内 容 位 于 主体 部 分 ，<body> 开 始 标签 以 上 的 内 容 都 是 为 浏览 器 和 搜索 引擎 准备 的 。 | 
<!IDOCTYPE html> 部 分 (简称 为 DOCTYPE) 告诉 浏览 器 这 是 一 个 HTMLS 页 面 。DOCTYPE 应 该 始 | 
终 位 于 代码 的 第 1 行 ， 写 在 HTML 页 面 的 顶部 。 | 
html 元 素 包 着 页 面 的 其 余部 分 ， 即 <html> 开 始 标签 和 </html> 结 束 标签 〈 表 示 页 面 的 结尾 ) 之 间 | 
的 内 容 。 | 
<head> 和 </head> 标 签 之 间 的 区 域 表示 网 页 文档 的 头 部 。 头 部 代码 中 ， 有 一 部 分 是 浏览 者 可 见 的 ， 
即 <title> 和 </title> 之 间 的 文本 。 这 些 文本 会 出 现在 浏览 器 标签 页 中 。 某 些 浏览 器 会 在 窗口 的 项 部 显示 ， 
这 些 文本 ， 作 为 网 页 的 标题 显示 。 此 外 ， 这 些 文本 通常 还 是 浏览 器 书签 的 默认 名 称 ， 它 们 对 搜索 引擎 | 
来 说 也 是 非常 重要 的 信息 。 | 


2.1.3 网 页 主体 内 容 


尝试 为 页 面 添加 一 些 主体 内 容 。 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title> 从 今天 开始 努力 学 习 HTML5</title> 
</head> 
<body> 
<article> 
<hl> 小 白 自 语 </hl> 
<img src="images/xiaobaijpg" width="50" alt=" 小 白 者 ， 我 也 " /> | 
<p> 我 是 <em> 小 白 </em>, 现在 准备 学 习 <a hre 合 "https://wwww3.org/TRjhtml5/" rel="extemal" title="HTMLS | 
参考 手册 ">HTML5</a></p> | 
</article> 
</body> 
</html> 


在 桌面 浏览 器 中 呈现 这 段 HTML 效果 ， 如 图 2.2 所 示 。 这 是 页 面 在 正 中 显示 的 效果 ， 在 其 他 浏 
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二 
览 器 中 的 效果 也 是 相似 的 。 使 用 浏览 器 查看 网 页 时 ， 不 会 显示 包围 文本 内 容 的 标记 ， 不 过 这 些 标 记 是 
非常 有 用 的 ， 我 们 使 用 它们 来 描述 内 容 ， 如 <p> 标 记 用 于 表示 段落 的 开始 。 
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CS htp//ocalhoste000, - BO | B Sf 妈 乒 力 学 习 H.. x 
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我 是 从 应 ,现在 准备 学 习 HTML5 


图 2.2 添加 主体 内 容 


整个 页 面包 含 了 3 部 分 : 文本 内 容 、 外 部 文件 的 引用 (图 像 的 sre 值 和 链接 的 href 值 》 和 标记 。 

HTML 提供 了 很 多 元 素 ， 上 面 示例 演示 了 6 种 最 为 常见 的 元 素 ，a、article、em、hl、img 和 p。 每 个 

元 素 都 有 各 自 的 含义 ， 例 如 ，a 是 链接 ，hl 是 标题 ，img 是 图 像 。 

人 注意 : 在 代码 中 行 与 行 之 间 通 过 回 车 符 分 开 ， 不 过 它 不 会 影响 页 面 的 呈现 效果 。 对 HTML 进行 

| 代码 缩 进 显示 ， 与 内 容 在 浏览 器 中 的 显示 效果 没有 任何 关系 ， 但 是 pre 元 素 是 一 个 例外 。 
习惯 上 ,我们 会 对 底 套 结构 的 代码 进行 缩 进 排版 , 这样 会 更 容易 看 出 元 素 之 间 的 层级 关系 。 


2.14 HTML 标签 


一 个 标签 由 3 部 分 组 成 : 元 素 、 属 性 和 值 ， 简 单 说 明 如 下 。 
1. 元 素 
元 素 就 是 用 来 描述 网 页 不 同 部 分 的 标签 名 称 。 


大 多 数 元 素 既 包含 文本 ， 也 包含 其 他 元 素 ， 这 些 元 素 由 开始 标签 、 内 容 和 结束 标签 组 成 。 开 始 标 


| 签 是 放 在 一 对 尖 括 号 中 的 元 素 的 名 称 ， 以 及 可 能 包含 的 属性 ， 结 束 标签 是 放 在 一 对 尖 括 号 中 的 斜 本 加 
， 元 素 的 名 称 ， 例 如 : 


<en> 小 白 </em> 
开始 标签 : <em>。 
内 容 文本 : 小 白 。 
结束 标签 : </em>。 
还 有 一 些 元 素 是 空 元 素 ， 既 不 包含 文本 ， 也 不 包含 其 他 元 素 ， 例 如 : 
<img strc="images/xiaobaijpg" width="50" alt=" 小 白 者 ， 我 也 " /> 


img 元 素 并 不 包含 任何 文本 内 容 。alt 属性 中 的 文字 是 元 素 的 一 部 分 ， 并 非 显 示 在 网 页 中 的 内 容 。 
2 4 有 一 个 标签 ， 同 时 作为 元 素 的 开始 标签 和 结束 标签 使 用 。 


向 图 图 加 


， 次 提示 : 在 HTMLS 中 ， 结 尾 处 的 空格 和 针 村 是 可 选 的 。 不 过 ， 最 后 面 的 “>” 是 必需 的 .元素 的 


名 称 都 用 小 写字 母 。 不 过 ，HTMLS5 对 此 未 做 要 求 ， 也 可 以 使 用 大 写字 母 。 除 非特 殊 需 要 ， 
否则 不 推荐 使 用 大 写字 母 。 
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2. 属性 和 值 


属性 为 元 素 添 加 一 些 必要 信息 。 在 HTML5 中 , 属性 值 两 边 的 引号 是 可 选 的 , 但 习惯 上 建议 写 上 。 
与 元 素 的 名 称 一 样 ， 尽 量 使 用 小 写字 母 编写 属性 的 名 称 ， 例 如 : | ; 
<label for="email"> 电 子 邮箱 </label> | 全 


这 是 一 个 label 元 素 (关联 文本 标签 与 表单 字段 )。 属 性 总 是 位 于 元 素 的 开始 标签 内 ， 属 性 的 值 通 
常 放 在 一 对 括号 中 。 | 

元 素 (如 a 和 img) 可 以 有 多 个 属性 ,每 个 属性 都 有 各 自 的 值 。 属 性 的 顺序 并 不 重要 。 不 同 的 “ 属 | 
性 / 值 ”对 之 间 用 空格 隔 开 ， 例 如 : | 

<a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5 参考 手册 ">HTML5</a> 


有 的 属性 可 以 接受 任何 值 ， 有 的 属性 则 有 限制 。 最 常见 的 是 那些 仅 接受 预定 义 值 即 枚 举 值 ) 的 
属性 。 此 时 ， 用 户 必须 从 一 个 标准 列表 中 选 一 个 值 ， 枚 举 值 一 般 用 小 写字 母 编写 ， 例 如 : | 
<link rel="stylesheet" media="screen" href="style.css" /> | 
户 只 能 将 link 元 素 的 media 属性 设 为 al、sereen、print 等 值 中 的 一 个 ， 不 能 像 href 属性 和 tite ， 
属性 那样 可 以 输入 任意 值 。 
有 很 多 属性 的 值 需要 设置 为 数字 ， 特 别 是 那些 描述 大 小 和 长 度 的 属性 。 数 字 值 不 需要 包含 单位 ， | 
只 需 输 入 数字 本 身 。 图 像 和 视频 的 宽度 和 高 度 是 有 单位 的 ， 默 认为 像素 。 | 
有 的 属性 (如 href 和 sre) 用 于 引用 其 他 文件 ， 它 们 只 能 包含 URL 形式 的 字符 串 值 。 | 
还 有 一 种 特殊 的 属性 称 为 布尔 属性 ， 这 种 属性 的 值 是 可 选 的 ， 因 为 只 要 这 种 属性 出 现 就 表示 其 值 
为 真 。 如 果 要 包含 一 个 值 ， 可 写 上 属性 名 本 身 。 布 尔 属性 也 是 预定 义 好 的 ， 无 法 自 创 ， 例 如 ， | 
<input type="email" name="emailaddr" required /> | 
上 面 代码 提供 了 一 个 让 用 户 输入 电子 邮件 地 址 的 输入 框 。 布尔 属性 required 表示 用 户 必 须 填写 该 
输入 框 。 布 尔 属性 不 需要 属性 值 ， 如 果 一 定 要 加 上 属性 值 ， 则 可 以 编写 为 required="required"。 | 
2.1.5 保存 网 页 文档 
与 文本 文件 一 样 , 网 页 也 是 文本 文件 ,只 不 过 扩展 名 不 同 , 一 般 为 .html 或 .htm。 保存 网 页 文档 时 ， 
要 注意 网 页 文件 命名 ， 这 将 有 助 于 对 文件 进行 组 织 ， 使 访问 者 更 容易 找到 页 面 ， 确 保 浏览 器 能 正确 地 | 
解析 ， 以 及 增强 搜索 引擎 优化 (SEO )。 | 
1. 文件 名 使 用 小 写字 母 | 
文件 的 名 称 应 全 部 用 小 写字 母 ， 不 要 使 用 中 文 命名 。 如 果 使 用 小 写字 母 , 访问 者 和 创建 者 就 不 必 
在 大 写字 母 和 小 写字 母 之 间 转 换 上 浪费 时 间 了 。 | 
2。 使 用 正确 的 扩展 名 | 
使 用 .html 作为 扩展 名 ， 用 户 也 可 以 使 用 -htm 作为 网 页 的 扩展 名 ,但 常用 .html。 如 果 页 面 使 用 其 | 
他 的 扩展 名 《如 .txt)， 浏 览 器 会 将 其 当做 文本 处 理 ， 相 当 于 将 网 页 代码 直接 呈现 给 访问 者 。 | 
3. 用 短 横 线 或 下 画 线 分 隔 单词 | 
不 要 在 文件 名 和 文件 夹 名 中 使 用 空格 分 隔 单词 。 应 该 使 用 短 横 线 ， 例如 , companyhistoryhtml 和 


Imy-favorite-movies.html。 不 推荐 使 用 下 画 线 (_)， 因 为 短 横 线 是 搜索 引擎 更 容易 接受 的 方式 。 
SEO 可 以 让 网 页 在 搜索 引擎 的 搜索 结果 中 排名 靠 前 。 
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2.2 语义 化 HTML 


语义 化 HTML 指 的 是 使 用 最 恰当 的 HTML 元 素 标记 网 页 内 容 ， 在 标记 的 过 程 中 不 过 关心 内 容 的 


显示 效果 。 


| 22.1 编写 语义 化 的 重要 性 


编写 语义 化 HTML 的 重要 性 如 下 ， 详 细 说 明 可 以 扫 码 了 解 。 
回 “无 障碍 访问 。 

搜索 引擎 优化 (SEO) 。 

加 ”更 容易 维护 代码 和 添加 样式 。 


2.2.2 语义 化 的 基本 方法 


【示例 】 下 面 示例 设计 一 个 简单 的 图 文 页 面 。 


<article> 
<hl> 小 白 自 语 </h1> 
<img src="images/xiaobai.jpg" width="50" alt=" 小 白 者， 我 也 " /> 
<p> 我 是 <em> 小 白 </em>, 现在 准备 学 习 <a href="https://www.w3.org/TR/html5/" rel="extemal" title="HTML5 


参考 手册 ">HTML5</a></p> 


</article> 


在 上 面 页 面 的 body 元 素 中 , 包含 了 article、 hl、 img、p、em 和 a 元素。 所 有 的 内 容 都 包含 在 article 


元 素 中 。article 定义 了 一 段 独立 的 内 容 ， 其 他 地 方 可 以 重用 这 段 内 容 。 


尽管 HTML 元 素 大 约 有 100 种 ， 但 经 常用 到 的 只 有 少量 核心 元 素 ， 而 其 余 的 则 较 少 使 用 。 了 解 


了 一 些 常见 元 素 ， 就 可 以 初步 设计 语义 化 页 面 。 对 于 初学 者 来 说 ， 做 到 下 面 几 步 要 求 ， 基 本 能 够 设计 
出 语义 化 结构 。 


(1) 在 基本 网 页 中 ， 使 用 article 元 素 是 个 不 错 的 选择 ， 但 并 非 每 个 网 页 都 必须 这 样 编写 。 
(2) 标题 是 网 页 重要 组 成 部 分 。HTML 提供 了 6 个 标题 级 别 ， 即 hl1~h6。 其 中 ，hl 是 最 重要 的 


| 一 级 二 是 屿 的 子 标题 ，h3 是 b2 的 子 标题 ， 以 此 类 推 


标题 是 描述 页 面 信息 的 重要 元 素 。 标 题 确保 了 页 面 对 屏 幕 阅读 器 用 户 来 说 更 具 可 访问 性 ， 而 搜索 


引擎 是 它们 确定 页 面 的 重点 。 每 个 HTML 都 应 该 有 一 个 h1， 或 者 多 个 h1， 这 取决 于 页 面 的 内 容 。 如 
果 页 面具 有 一 个 标题 ， 应 该 使 用 hl 。 


(3) img 元 素 是 呈现 图 像 的 主要 方式 。 如 果 图 像 没 有 加 载 成 功 ， 或 者 页 面 仅 显 示 文 本 信息 ， 就 


会 显示 alt 属性 中 的 文字 。 屏 幕 阅读 器 可 以 对 alt 文本 进行 朗读 。 


(4) 段落 使 用 p 元 素 进行 标记 。 一 个 段落 可 以 包含 多 个 句子 。 如 果 页 面 需要 再 加 一 个 段落 ， 只 


需要 在 第 一 个 p 元 素 之 后 再 加 一 个 p 元 素 即 可 。 段 落 中 嵌 套 了 两 个 元 素 (em 和 a)， 分 别 定义 其 短语 
”内 容 的 含义 。 这 是 HTMLS5 提供 的 大 量 用 于 提升 段落 文本 语义 的 短语 元 素 。 


(5) em 元 素 表 示 “ 强 调 ” 在 示例 页 面 中 ， 它 强调 了 对 小 白 的 身份 。 注 意 ，HTML 描述 的 是 内 


容 的 含义 ,因此 em 代表 的 是 语义 上 的 强调 , 而 非 视觉 上 的 显示 , 不 过 通常 会 用 斜体 表示 em 文本 (可 
”以 使 用 CSS 改变 这 一 样式 )。 
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(6) a 元 素 定义 了 一 个 链接 。 链 接 是 所 有 HTML 元 素 中 最 强大 的 元 素 ， 因 为 有 它 才 得 以 形成 互 

联 互通 。 互 联网 的 定义 就 是 ,将 一 个 页 面 与 另 一 个 页 面 或 资源 连接 起 来 , 或 者 将 页 面 的 一 部 分 与 男 一 | 
部 分 连接 起 来 。 在 这 个 例子 中 ， 文 字 HTMLS5 是 一 个 指向 W3C 官网 上 的 某 个 页 面 的 链接 。 | 


六 提示 : 可 选 的 tel 属性 定义 链接 指向 的 是 男 一 个 网 站 ， 这 也 增加 了 语义 (没有 这 个 属性 链接 也 会 。 国 思 | 
正常 工作 ) 。 可 选 的 title 属性 提供 了 有 关 所 指 页 面 的 信息 ， 它 增强 了 a 元 素 的 语义 当 用 | 
户 用 鼠标 滑 过 该 链接 ， 就 会 显示 title 属性 的 内 容 。 


人) 注意 : HTMLS 并 没有 为 每 一 种 内 容 类 型 提供 对 应 的 元 素 ， 这 样 会 使 HTML 语言 变 得 笨重 。 相 反 ， 
HTMILS 采取 了 一 种 务实 的 态度 ， 其 所 定义 的 元 素 覆 盖 了 绝 大 多 数 情况 。 | 
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目前 最 新 主流 浏览 器 对 HTMLS 都 提供 了 很 好 的 支持 ， 下 面 结合 示例 介绍 如 何 正确 创建 HIML5 
文档 。 | 


2.3.1 编写 第 一 个 HTML5 文档 


本 节 示例 将 遵循 HTMLS 语法 规范 编写 一 个 文档 。 本 例文 档 省 略 了 <html>、<head>、<body> 等 标 。 起 天 请 
签 ,使 用 HTMLS 的 DOCTYPE 声明 文档 类 型 ， 简 化 <meta> 的 charset 属性 设置 ， 省 略 <p> 标 签 的 结束 | 
标记 ， 使 用 < 元 素 /> 的 方式 来 结束 <meta> 和 <br> 标 签 等 。 


<!DOCTYPE html> 

<meta charset="UTF-8"> 

<tile>HTML5 基本 语法 </title> 

<hl>HTMLS 的 目标 </h1> 

<p>HTML5 的 目标 是 为 了 能 够 创建 更 简单 的 Web 程序 ， 书 写 出 更 简洁 的 HTML 代码 。 

<br> 例 如 ， 为 了 使 Web 应 用 程序 的 开发 变 得 更 容易 ， 提 供 了 很 多 API; 为 了 使 HTML 变 得 更 简洁 ， 开 发 出 
了 新 的 属性 、 新 的 元 素 等 。 总 体 来 说 ， 为 下 一 代 Web 平台 提供 了 许 许多 多 新 的 功能 。 


这 段 代 码 在 下 浏览 器 中 的 运行 结果 如 图 2.3 所 示 。 


© ET Er 


HTMLS 的 目标 
下 5 的 目标 是 为 了 能 够 创建 更 简单 的 Web 程 序 ， 书 写 出 更 简洁 的 HTML 代 


全 0， 为 了 使 Weh 应 用 程序 的 开发 变 和 更 容易 ， 提 供 了 很 多 Ap 为 了 使 
HTMI 雪 得 更 简洁 ， 开 发 出 了 新 的 量 性 、 新 的 元 素 符 .总 示 宁 说， 为 下 一 代 
Web 平 人 提供 了 许 许 多 多 新 的 功能 。 


图 2.3 编写 HTML5 文档 


通过 短 短 几 行 代码 就 完成 了 一 个 页 面 的 设计 ,这 充分 说 明了 HTMLS5 语法 的 简洁 性 .同时 ,HTML5 
不 是 一 种 XML 语言 ， 其 语法 也 很 随意 ， 下 面 从 这 两 方面 进行 逐 句 分 析 。 
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Note 


第 一 行 代码 如 下 。 
<!DOCTYPE HIML> 

不 需要 包括 版 本 号 ， 仅 告诉 浏览 器 需要 一 个 doctype 来 触发 标准 模式 ， 可 谓 简明 扼要 。 

接 下 来 说 明文 档 的 字符 编码 ， 否 则 将 出 现 浏览 器 不 能 正确 解析 。 

<meta charset="utf-8"> 

同样 也 很 简单 ，HTMLS 不 区 分 大 小 写 ， 不 需要 标记 结束 符 ， 不 介意 属性 值 是 否 加 引号 ， 即 下 列 


代码 是 等 效 的 。 


<meta charset="utf-8"> 
<META charset="utf-8" /> 
<META charset=utf-8> 


在 主体 中 ， 可 以 省 略 主体 标记 ， 直 接 编写 需要 显示 的 内 容 。 虽 然 在 编写 代码 时 省 略 了 <html>、 


| <head> 和 <body> 标 记 ， 但 在 浏览 器 进行 解析 时 ， 将 会 自动 进行 添加 。 但 是 ， 考 虑 到 代码 的 可 维护 性 ， 
| 在 编写 代码 时 ， 应 该 尽量 增加 这 些 基本 结构 标签 。 


2.3.2 比较 HTML4 与 HTML5 文档 结构 


下 面 通过 示例 具体 说 明 HTML5 是 如 何 使 用 全 新 的 结构 化 标签 编织 网 页 的 。 
【示例 1】 本 例 设计 将 页 面 分 成 上 、 中 、 下 3 部 分 : 上 面 显 示 网 站 标题 ， 中 间 分 两 部 分 ， 左 侧 为 


辅助 栏 ， 右 侧 显示 网 页 正文 内 容 ， 下 面 显示 版 权 信息 ， 如 图 2.4 所 示 。 使 用 HIML4 构建 文档 基本 结 
构 如 下 。 


<div id="header">[ 标 题 栏 ]</div> 
<div id="aside">[ 侧 边栏 ]</div> 
<div id="article">[ 正 文 内 容 ]</div> 
<div id="footer">[ 页 脚 栏 ]</div> 


Ca 四 - @ htte://ocahost 0s/mysiteftestl btm "Bo 从 太 流 


图 2.4 简单 的 网 页 布局 
尽管 上 述 代码 不 存在 任何 语法 错误 ， 也 可 以 在 HTML5 中 很 好 地 解析 ， 但 该 页 面 结构 对 于 浏览 器 


来 说 是 不 具有 区 分 度 的 。 对 于 不 同 的 用 户 来 说 ，ID 命名 可 能 因 人 而 异 ， 这 对 浏览 器 来 说 ， 就 无 法 尖 
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且 
别 每 个 div 元 素 在 页 面 中 的 作用 ， 因 此 也 必然 会 影响 其 对 页 面 的 语义 解析 。 
【示例 2】 下 面 使 用 HTMLS 新 增 元 素 重新 构建 页 面 结构 ， 明 确定 义 每 部 分 在 页 面 中 的 作用 。 


<header> [标题 栏 ]</header> | 

<aside>[ 侧 边栏 ]<Jaside> | 便门 
<article>[ 正 文 内 容 ]</article> ~ 
<footer>[ 页 脚 栏 ]</footer> Note 


虽然 两 段 代码 不 一 样 ， 但 比较 上 述 两 段 代 码 ， 使 用 HIMLS 新 增 元 素 创建 的 页 面 代码 更 简洁 、 明 | 
晰 。 可 以 很 容易 地 看 出 , 使 用 <div id="header">、<div id="aside">、<div id="article"> 和 <div id="footer"> | 
这 些 标记 元 素 没有 任何 语义 , 浏览 器 也 不 能 根据 标记 的 ID 名称 来 推断 它 的 作用 , 因为 ID 名 称 是 随意 | 
变化 的 。 | 
而 HTML5 新 增 元 素 header, 明确 地 告诉 浏览 器 此 处 是 页 头 ,aside 元素 用 于 构建 页 面 辅助 栏 ,article | 
元 素 用 于 构建 页 面 正文 内 容 ，footer 元 素 定义 页 脚注 释 内 容 。 这 样 极 大 地 提高 了 开发 的 便利 性 和 浏览 
器 的 解析 效率 。 | 


24 在 线 练 习 


本 节 将 通过 上 机 示例 ， 帮 助 初学 者 熟悉 HTML 文档 结构 和 HTML5 基础 ， 感 兴趣 的 同学 可 以 扫 
码 练习 。 | 


设计 HTML5 结构 


创建 清晰 、 一 致 的 结构 不 仅 可 以 为 页 面 建立 良好 的 语义 化 基础 ,也 可 以 大 大 降低 在 文档 
中 应 用 CSS 样式 的 难度 。 本 章 介绍 构建 HTML5 文档 结构 所 需 的 HTML 元素 


【 学 习 重 点 】 


| 


吾 吾 至 至 


创建 页 面 标题 
普通 页 面 构成 

创建 页 而 、 页 脚 和 标记 导航 
标记 网 页 主要 区 域 
创建 文章 ， 定 义 区 块 
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3.1 头 部 信息 


采用 ， 不 会 显示 在 网 页 中 。 另 外 ， 搜 索引 擎 也 会 检索 这 些 信息 ， 因 此 重视 并 设置 这 些 头 部 信息 非常 | Note 


在 HTML 文档 的 头 部 区 域 ， 存 储 着 各 种 网 页 基本 信息 (也 称 元 信息 )， 这 些 信息 主 要 被 浏览 器 所 


重要 。 


3.1.1 定义 网 页 标题 


使 用 <title> 标 签 可 定义 网 页 标题 ， 例 如 : 


<html> 
<head> 
<tile>HTMLS5 标签 说 明 </title> 
</head> 


<body> 
HTMLS5 标签 列表 
</body> 
</html> 


浏览 器 会 把 它 放 在 窗口 的 标题 栏 或 状态 栏 中 显示 , 如 图 3.1 所 示 。 当 把 文档 加 入 用 户 的 链接 列表 、 
收藏 夹 或 书签 列表 时 ， 标 题 将 作为 该 文档 链接 的 默认 名 称 。 


图 3.1 显示 网 页 标题 


title 元 素 必须 位 于 head 部 分 。 页 面 标题 会 被 Google、 百 度 等 搜索 引擎 采用 ， 从 而 能 够 大 致 了 解 
页 面 内 容 ， 并 将 页 面 标 题 作为 搜索 结果 中 的 链接 显示 ， 如 图 3.2 所 示 。 它 也 是 判断 搜索 结果 中 页 面相 
关 度 的 重要 因素 。 


Es /os ms [OIG sw em | 


Kn 
Bai 舍 百度 hm5 中 
个 为 全 推荐 。 创 hunl5 且 是 证 么 手机 。 hml5 是 二 么 W3scl O' 
se EF f 的 HTML 人 Hi HTML/CSS JavaScript Server Side 


NS HTML 5 简介 


HTML5 凋 介 HTML5 是 HTML 最 新 的 禾 订 版 本 .201 
墨 (N3C) 半 成 标准 制定 。HTML5 的 设计 目的 是 为 
多 妃 秆 。HTMLS 简单 易学 什么 县 
www.runoob.comyhtm/ht ，- - 百 本 性 吾 


3.2 ”网 页 标题 在 搜索 引擎 中 的 作用 


总 之 ， 让 每 个 页 面 的 title 是 唯一 的 ， 从 而 提升 搜索 引擎 结果 排名 ， 并 让 访问 者 获得 更 好 的 体验 。 
页 面 标题 也 出 现在 访问 者 的 History 面板 、 收 藏 夹 列表 以 及 书签 列表 中 。 
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【补充 】 
| title 元 素 是 必需 的 ，title 中 不 能 包含 任何 格式 、HTML、 图 像 或 指向 其 他 页 面 的 链接 。 一 般 网 页 
| 编辑 器 会 预先 为 页 面 标题 填 上 默认 文字 ， 要 确保 用 自己 的 标题 蔡 换 它们 。 
钴 站 | 很 多 开发 人 员 不 太 重 视 title 文字 , 仅 简单 地 输入 网 站 名 称 ， 并 将 其 复制 到 全 站 每 一 个 网 页 中 。 如 
” 、” ， 果 流 量 是 网 站 追求 的 指标 之 一 , 这 样 做 会 对 网 站 产生 很 大 的 损失 。 不 同 搜索 引擎 确定 网 页 排名 和 内 容 
go22 索引 规则 的 算法 是 不 一 样 的 。 不 过 ，title 通常 都 扮演 着 重要 的 角色 。 搜 索引 擎 会 将 title 作为 判断 页 面 
| 主要 内 容 的 指标 ， 并 将 页 面 内 容 按照 与 之 相关 的 文字 进行 索引 。 
| 有 效 的 title 应 包含 几 个 与 页 面 内 容 密 切 相关 的 关键 字 。 一 种 最 佳 的 方法 就 是 选择 能 简要 概括 文档 
| 内 容 的 文字 作为 title 文字 。 这 些 文字 既 要 对 屏幕 阅读 器 用 户 友好 ， 又 要 有 利于 搜索 引擎 排名 。 
| 将 网 站 名 称 放 入 tile, 但 将 页 面 特有 的 关键 字 放 在 网 站 名 称 的 前 面 会 更 好 。 建 议 将 title 的 核心 内 
| 容 放 在 前 60 个 字符 中 ， 因 为 搜索 引擎 通常 将 超过 此 数目 (作为 基准 ) 的 字符 截断 。 不 同 浏览 器 显示 
| 在 标题 栏 中 的 字符 数 上 限 不 尽 相 同 。 浏 览 器 标签 页 会 将 标题 截 得 更 短 ， 因 为 它 占 的 空间 较 少 。 


3.1.2 ”定义 网 页 元 信息 


使 用 <meta> 标 签 可 以 定义 网 页 的 元 信息 , 例如 ， 定义 针对 搜索 引擎 的 描述 和 关键 词 ， 一 般 网 站 都 
”必须 设置 这 两 条 元 信息 ， 以 方便 搜索 引擎 检索 。 
| 回 ”定义 网 页 的 描述 信息 如 下 所 示 。 

<meta name="description" content=" 标 准 网 页 设计 专业 技术 资讯 " /> 

回 ”定义 页 面 的 关键 词 如 下 所 示 。 

<meta name="keywords" content="HTML,DHTML, CSS, XML, XHTML, JavaScript" /> 
| <meta> 标 签 位 于 文档 的 头 部 ，<head> 标 签 内 ， 不 包含 任何 内 容 。 使 用 <meta> 标 签 的 属性 可 以 定 
| 义 与 文档 相关 联 的 “名 称 / 值 ”对 。<meta> 标 签 可 用 属性 说 明 如 表 3.1 所 示 。 


表 3.1 <meta> 标 签 属性 列表 


必需 的 ， 定 义 与 http-equiv 或 name 属性 相关 联 的 元 信息 
把 content 属性 关联 到 HTTP 头 部 。 取 值 包括 content-type、expires、refresh、set-cookie 
name 把 content 属性 关联 到 一 个 名 称 。 取 值 包括 author、description、keywords、generator、revised 等 


scheme | 定义 用 于 翻译 content 属性 值 的 格式 
| charset 定义 文档 的 字符 编码 ， _ _ 
【示例 】 下 面 列举 常用 元 信息 的 设置 代码 ， 更 多 元 信息 的 设置 可 以 参考 HTML 手册 。 

使 用 http-equiv 等 于 content-type， 可 以 设置 网 页 的 编码 信息 。 

回 ”设置 UTF8 编码 如 下 所 示 。 


<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
| 这 担 示 : HTMLS 简化 了 字符 编码 设置 方式 meta charset-"uiE8'>， 黄 作用 是 相同 的 。 
设置 简体 中 文 gb2312 编码 如 下 所 示 。 

<meta http-equiv="content-type" content="text/html: charset=gb2312" /> 
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AI) 注意 : 每 个 HIML 文档 都 需要 设置 字符 编码 类 型 ， 否 则 可 能 会 出 现 乱 码 ， 其 中 UTF-8 是 国家 通 
用 编码 ， 独 立 于 任何 语言 ， 因 此 都 可 以 使 用 。 
使 用 content-language 属性 值 定义 页 面 语言 的 代码 。 如 下 所 示 设置 中 文 版 本 语言 。 
<meta http-equiv="content-language" content="zh-CN" /> 
使 用 reftesh 属性 值 可 以 设置 页 面 刷新 时 间或 跳 转 页 面 ， 如 5 秒 之 后 刷新 页 面 。 Jote 
<meta http-equiv="refresh" content="5" /> | 
5 秒 之 后 跳 转 到 百度 首页 如 下 所 示 。 
<meta http-equiv="refresh" content="5; url= https://www.baidu.com/" /> 
使 用 expires 属性 值 设置 网 页 缓存 时 间 如 下 所 示 。 
<meta http-equiv="expires" content="Sunday 20 October 2019 01:00 GMT" /> 
也 可 以 使 用 如 下 方式 设置 页 面 不 缓存。 
<meta http-equiv="pragma" content="no-cache" /> 
类 似 设置 还 有 如 下 所 示 。 


<meta name="author" content="https://www.baidu.com/" /> ”<!-- 设 置 网 页 作者 --> 
<meta name="copyright" content=" https://www.baidu.com/" /> <!-- 设 置 网 页 版 权 --> 
<meta name="date" content="2019-01-12T20:50:30+00:00" /> <!-- 设 置 创建 时 间 --> 
<meta name="robots" content="none" /> <!-- 设 置 禁止 搜索 引擎 检索 --> 


3.1.3 ”定义 文档 视 口 


回 
在 移动 Web 开发 中 ， 经 常会 遇 到 viewport ( 视 口 ) 问题 ， 就 是 浏览 器 显示 页 面 内 容 的 屏幕 区 域 。 | 视频 讲解 
- 般 移 动 设备 的 浏览 器 默认 都 设置 一 个 <meta name="viewport"> 标 签 ， 定 义 一 个 虚拟 的 布局 视 口 ， 用 | 
于 解决 早期 的 页 面 在 手机 上 显示 的 问题 。 | 
iOS、Android 基本 会 将 这 个 视 口 分 辩 率 设置 为 980 像素 ， 所 以 桌面 网 页 基本 能 够 在 手机 上 呈现 ， | 
只 不 过 看 上 去 很 小 ， 用 户 可 以 通过 手动 缩放 网 页 进行 阅读 。 这 种 方式 用 户 体验 很 差 ， 建 议 使 用 <meta | 
name="viewport"> 标 签 设置 视图 大 小 。 | 
<meta name="viewport"> 标 签 的 设置 代码 如 下 。 


<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=]; user- | 
scalable=no:"> 


各 属性 说 明 如 表 3.2 所 示 。 


表 3.2 <meta name="viewport"> 标 签 的 属性 说 明 | 


width 正 整数 或 device-width | 定义 视 口 的 宽度 ， 单 位 为 像素 
height | 正 整 数 或 device-height | 定义 视 口 的 高 度 ， 单 位 为 像素 ， 一 般 不 用 | 
initial-scale | [oo-loo 定义 初始 缩放 值 | 


定义 缩小 最 小 比例 ， 它 必须 小 于 或 等 于 maximum-scale 设置 


minimum-scale 
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Note 


续 表 
属 性 说 了 明 
maximum-scale [0.0-10.0] 定义 放大 最 大 比例 ， 它 必须 大 于 或 等 于 minimum-scale 设置 
user-scalable yes/no 定义 是 否 允 许 用 户 手 动 缩放 页 面 ， 默 认 值 yes 


【示例 】 下 面 示例 在 页 面 中 输入 一 个 标题 和 两 段 文 本 ， 如 果 没有 设置 文档 视 口 ， 则 在 移动 设备 中 


所 呈现 效果 如 图 3.3 所 示 ， 而 设置 了 文档 视 口 之 后 ， 所 呈现 效果 如 图 3.4 所 示 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 设 置 文 档 视 口 </title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

</head> 

<body> 

<hl>width=device-width, initial-scale=1</h1> 

<p>width=device-width 将 layout viewport (布局 视 口 ) 的 宽度 设置 ideal viewport (理想 视 口 ) 的 宽度 。</p> 
<p>initial-scale=1 表示 将 layout viewport (布局 视 口 ) 的 宽度 设置 为 ideal viewport (理想 视 口 ) 的 宽度 。</p> 
</body> 

</html> 


locahostesthml 古 Goosk alhosyestzhml 去 荐 00 


width=device- 
width, initial- 

| scale=1 
width=device-width 将 layout vlewport ( 布 上 
局 视 口 ) 的 突 度 设置 ldeal vewport ( 理想 
视 口 ) 的 寞 度 。 
initial-scale=1 囊 示 特 layout viewport ( 布 | 


有 局 视 口 ) 的 宽度 设置 为 deal viewport ( 理 | 
想 视 口 ) 的 赛 度 


| 和 局 加 - 四 EE 


Custom 480x80t PPL: 23: [gj |50% ~ Custom 480xe0 ?PE 23: [Gs [50% ~ 


图 3.3 默认 被 缩小 的 页 面 视图 图 3.4 保持 正常 的 布局 视图 


。 次 提示 : ideal viewport ( 理想 视 口 ) 通常 就 是 我 们 说 的 设备 的 屏幕 分 状 率 。 


3.1.4 最 新 head 指南 


本 节 为 线 上 拓展 内 容 ， 介 绍 最 新 的 head 元 素 使 用 指南 。 本 节 内 容 适 合 进 阶 同 学 Et 


| 参考 ， 对 于 初学 者 来 说 ， 可 以 有 选择 性 的 阅读 ， 需 要 时 备查 使 用 。 详 细 内 容 请 扫 码 阅读 。 侍 上 罗江 
| 3.1.5 ”移动 版 头 信息 


节 为 线 上 拓展 内 容 ， 介 绍 移动 版 HTML5 head 头 部 信息 设置 说 明 。 本 节 内 容 适 合 


*。20 。 


第 引 章 设计 HTML5 结构 | 


进 阶 同学 参考 ， 对 于 初学 者 来 说 ， 可 以 有 选择 性 的 阅读 ， 需 要 时 备查 使 用 。 详 细 内 容 请 扫 码 阅读 。 
3.2 ”构建 基本 结构 


HTML 文档 的 主体 部 分 包括 了 要 在 浏览 器 中 显示 的 所 有 信息 。 这 些 信息 需要 在 特定 的 结构 中 
现 ， 下 面 介绍 网 页 通用 结构 的 设计 方法 。 回 


3.2.1 定义 文档 结构 i 
[Oe 


HTML5 包含 一 百 多 个 标签 ， 大 部 分 继承 自 HTML4， 新 增加 30 个 标签 。 线 上 阅读 视频 讲解 
这 些 标签 基本 上 都 被 放置 在 主体 区 域内 〈<body>)， 我 们 将 在 各 章节 中 逐一 进行 说 明 。 

正确 选用 HIMLS 标签 可 以 避免 代码 宛 余 。 在 设计 网 页 时 不 仅 需要 使 用 <div> 标 签 来 构建 网 页 通 
用 结构 ， 还 要 使 用 下 面 几 类 标签 完善 网 页 结构 。 

回 ”<hl>、<h2>、<h3>、<h4>、<h5>、<h6>: 定义 文档 标题 ，1 表示 一 级 标题 ，6 表示 六 级 标 
题 ， 常 用 标题 包括 一 级 、 二 级 和 三 级 。 
<p>: 定义 段落 文本 。 
<ul>、<ol>、<li> 等 : 定义 信息 列表 、 导 航 列 表 、 榜 单 结构 等 。 
<table>、<tr>、<td> 等 : 定义 表格 结构 。 
<form>、<input>、<textarea> 等 : 定义 表单 结构 。 
<span>: 定义 行内 包含 框 。 

【示例 】 下 面 示例 是 一 个 简单 的 HTML 页 面 ， 使 用 了 少量 HTML 标签 。 它 演示 了 一 个 简单 的 文 
档 应 该 包含 的 内 容 ， 以 及 主体 内 容 是 如 何在 浏览 器 中 显示 的 。 

(1) 新 建文 本 文件 ， 输 入 下 面 代码 。 

<html> 

<head> 
<meta charset="utf-8"> 


<title> 一 个 简单 的 文档 包含 内 容 </title> 
</head> 
<body> 
<h1> 我 的 第 一 个 网 页 文档 </h1> 
<p>HTML 文档 必须 包含 三 个 部 分 : </p> 


图 图 图 图 加 


<ul> 
<li>html 一 一 网 页 包含 框 <li> 
<li>head 一 一 头 部 区 域 </li> 
<li>body 一 一 主体 内 容 </li> 
</u> 
</body> 
</html> 


(2) 保存 文本 文件 ， 命 名 为 test， 设 置 扩展 名 为 .html。 
(3) 使 用 浏览 器 打开 这 个 文件 ， 则 可 以 看 到 如 图 3.5 所 示 的 预览 效果 。 
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HTMI 文 档 必须 包含 三 个 部 分 : 

。html 一 网 页 包含 框 

， 区 域 
body 一 主体 内 容 


图 3.5 网 页 文档 演示 效果 


为 了 更 好 地 选用 标签 ， 读 者 可 以 参考 w3school 网 站 的 http://www.w3school.com.cn/tags/index.asp 


页 面 信息 。 其 中 DTD 列 描述 标签 在 哪 一 种 DOCTYPE 文档 类 型 是 允许 使 用 的 :S=Strict,T-Transitional， 


| F=Frameset。 


| 3.2.2 定义 内 容 标题 


HTML 提供 了 6 级 标题 用 于 创建 页 面 信息 的 层级 关系 。 使 用 hl、h2、h3、h4、h5 或 h6 元 素 对 


各 级 标题 进行 标记 ， 其 中 hl 是 最 高 级 别 的 标题 ，h2 是 hl 的 子 标题 ，h3 是 h2 的 子 标题 ， 以 此 类 推 。 


【示例 1】 标 题 代 表 了 文档 的 大 纲 。 当 设计 网 页 内 容 时 ， 可 以 根据 需要 为 内 容 的 每 个 主要 部 分 指 


| 定 一 个 标题 和 任意 数量 的 子 标题 ， 以 及 子 子 标题 等 


<hl> 唐 诗 欣赏 <hl> 
<h2> 春 晓 </h2> 

<h3> 孟 浩然 <h3> 

<p> 春 眠 不 觉 晓 ， 处 处 闻 啼 鸟 。</p> 
<p> 夜 来 风雨 声 ， 花 落 知 多 少 。</p> 


在 上 面 示例 中 ， 标 记 为 h2 的 “春晓 ”是 标记 为 hl 的 顶级 标题 “唐诗 欣赏 ”的 子 标题 ， 而 “和 孟 浩 


然 ” 是 hb3， 它 就 成 了 “春晓 ”的 子 标题 ， 也 是 hl 的 子 子 标 题 。 如 果 继 续 编写 页 面 其 余部 分 的 代码 ， 
| 相关 的 内 容 〈 段 落 、 图 像 、 视 频 等 ) 就 要 紧 跟 在 对 应 的 标题 后 面 。 


对 任何 页 面 来 说 ， 分 级 标题 都 可 以 说 是 最 重要 的 HTML 元 素 。 由 于 标题 通常 传达 的 是 页 面 的 主 


题 ， 因 此 ， 对 搜索 引擎 而 言 ， 如 果 标 题 与 搜索 词 匹配 ， 这 些 标题 就 会 被 赋予 很 高 的 权重 ， 尤 其 是 等 级 
最 高 的 hl， 当然 不 是 说 页 面 中 的 hl 越 多 越 好 ， 搜 索引 擎 能 够 聪明 判断 出 哪些 hl 是 可 用 的 ， 哪 些 hl 


| 是 凑 数 的 。 


【示例 2】 使 用 标题 组 织 内 容 。 在 下 面 示例 中 ， 产 品 指南 有 3 个 主要 的 部 分 ， 每 个 部 分 都 有 不 同 


层级 的 子 标题 。 标 题 之 间 的 空格 和 缩 进 只 是 为 了 让 层级 关系 更 清楚 一 些 ， 它 们 不 会 影响 最 终 的 显示 
| 效果 。 


<hl> 所 有 产品 分 类 </hl> 
<h2> 进 口 商 品 </h2> 
<h2> 食 品 饮料 </h2> 
<h3> 糖 果 / 巧 克 力 </h3> 
<h4> 巧 克 力 果冻 </h4> 
<h4> 口 香 糖 棒 棒 糖 软 糖 奶 糖 QQ 糖 </h4> 
<h3> 饼 干 糕点 </h3> 
<h4> 饼 干 曲 奇 </h4> 
<h4> 糕 点 蛋 卷 面包 暮 片 /膨化 <h4> 
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<h2> 粮 油 副 食 </h2> 
<h3> 大 米面 粉 </h3> | 
<h3> 食 用 油 </h3> 
在 默认 情况 下 ， 浏 览 器 会 从 hl 到 h6 逐 级 减 小 标题 的 字号 ， 如 图 3.6 所 示 。 在 默认 情况 下 ， 所 有 | 会 内 


的 标题 都 以 粗 体 显示 ，hl 的 字号 比 h2 的 大 ， 而 h2 的 又 比 h3 的 大 ， 以 此 类 推 。 每 个 标题 之 间 的 间隔 | 
也 是 由 浏览 器 默认 的 CSS 定制 的 ， 它 们 并 不 代表 HTML 文档 中 有 空 行 。 ‘Note 


¢ » Eevee ,5 
所 有 产品 分 类 

进口 商品 

食品 饮料 


口香糖 棒 棒 糖 软 糖 奶 档 QQ 六 
人 饼干 梯 点 

下 曲 厅 

峰 点 罩 知 面包 蓝 片 能 化 
粮油 副食 

大 米面 粉 

食用 油 


图 3.6 网 页 内 容 标题 的 层级 | 
深 提示 : 在 创建 分 级 标题 时 ， 要 避免 跳 过 某 些 级 别 ， 如 从 h3 直接 跳 到 h5。 不过， 允许 从 低级 别 跳 ， 
到 高 级 别 的 标题 。 例如， 在 “<h4> 粒 点 蛋 卷 面包 著 片 /膨化 </h4>” 后 面 紧 跟着 “<h2> | 
粮油 副食 <h2>" 是 没有 问题 的 ,因为 包含 “<h4> 料 点 蛋 卷 面包 鞭 片 /膨化 <h4>” 的 “<h2> 
食品 饮料 </h2>” 在 这 里 结束 了 ， 而 “<h2> 粮 油 副 食 </h2>” 的 内 容 开 始 了 。 
不 要 使 用 hl~h6 标记 副标题 、 标 语 以 及 无 法 成 为 独立 标题 的 子 标题 。 例 如 ， 假 设 有 一 篇 新 闻 报 ， 
道 ， 它 的 主 标题 后 面 紧 跟着 一 个 副标题 ， 这 时 ， 这 个 副标题 就 应 该 使 用 段落 ， 或 其 他 非 标题 元 素 。 | 
<hl> 天 猫 超市 <hl> 
<p> 在 乎 每 件 生活 小 事 <lp> 
涯 提示 : HTMLS 包含 了 一 个 名 为 hgroup 的 元 素 ， 用 于 将 连续 的 标题 组 合 在 一 起 ， 后 来 W3C 将 这 | 
个 元 素 从 HTML 5.1 规范 中 被 移 除 。 | 
< 客观 地 看 日 本 ， 理 性 地 看 中 国 <l> 
<p class="subhead"> 日 本 距离 我 们 并 不 远 ， 但 是 如 果真 的 要 说 它 在 这 十 年 、 二 十 年 有 什么 样 的 发 展 和 变化 ， 
又 好 像 对 它 了 解 的 并 不 多 ， 本 文 出 自 一 个 在 日 本 果 了 快 10 年 的 中 国 作者 ， 来 看 看 他 描述 的 日 本 ， 那 个 除了 老龄 ， 
化 和 城市 干净 这 些 标签 之 外 的 真实 国度 。</p> | 
上 面 代码 是 标记 文章 副标题 的 一 种 方法 。 可 以 添加 一 个 class, 从 而 能 够 应 用 相应 的 CSS。 该 class ， 
可 以 命名 为 subhead 等 名 称 。 | 
涪 提示 : 曾 有 人 提议 在 HTMLS 中 引入 subhead 元 素 ， 用 于 对 了 标题、 副标题、 标语、 署名 等 内 容 | 
进行 标记 ， 但 是 未 被 W3C 采纳 。 L 
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3.2.3 使 用 div 元 素 


| 有 时 需要 在 一 段 内 容 外 围 包 一 个 容器 ， 从 而 可 以 为 其 应 用 CSS 样式 或 JavaScript 效果 。 如 果 没有 
| 这 个 容器 ， 页 面 就 会 不 一 样 。 在 评估 内 容 的 时 候 ， 考 虑 使 用 article、section、aside、nav 等 元 素 ， 却 
发 现 它们 从 语义 上 来 讲 都 不 合适 。 
| 这 时 , 真正 需要 的 是 一 个 通用 容器 , 一 个 完全 没有 任何 语义 含义 的 容器 。 这 个 容器 就 是 div 元 素 ， 
”用 户 可 以 为 其 添加 样式 或 JavaScript 效果 。 
| 【示例 1】 下 面 示例 为 页 面 内 容 加 上 div 以 后 ， 可 以 添加 更 多 样式 的 通用 容器 。 
<div> 
<article> 

<hl> 文 章 标题 <hl> 

<p> 文 章 内 容 </p> 

<footer> 

<p> 注 释 信 息 </p> 
<address><a href="#">W3C</a></address> 
</footer> 
</article> 
</div> 

| 现在 有 一 个 div 包含 着 所 有 的 内 容 ， 页 面 的 语义 没有 发 生 改变 ,但 现在 我 们 有 了 一 个 可 以 用 CSS 
| 添加 样式 的 通用 容器 。 
| 与 header、footer、main、article、section、aside、nav、hl~h6、p 等 元 素 一 样 ， 在 默认 情况 下 ， 
| div 元 素 自身 没有 任何 默认 样式 ， 只 是 其 包含 的 内 容 从 新 的 一 行 开始 。 不 过 ， 我 们 可 以 对 div 添加 样 
| 式 以 实现 设计 。 
| div 对 使 用 JavaScript 实现 一 些 特定 的 交互 行为 或 效果 也 是 有 帮助 的 。 例 如 ， 在 页 面 中 展示 一 张 
| 照片 或 一 个 对 话 框 ， 同 时 让 背景 页 面 覆盖 一 个 半 透 明 的 层 〈 这 个 层 通常 是 一 个 div)。 
| 尽管 HTML 用 于 对 内 容 的 含义 进行 描述 ， 但 div 并 不 是 唯一 没有 语义 价值 的 元 素 。span 是 与 div 
| 对 应 的 一 个 元 素 : div 是 块 级 内 容 的 无 语义 容器 ; 而 span 则 是 短语 内 容 的 无 语义 容器 ， 例 如 它 可 以 放 


| 在 段落 元 素 p 之 内 。 

| 【示例 2】 在 下 面 代 码 中 为 段落 文本 中 部 分 信息 进行 分 隔 显示 ， 以 便 应 用 不 同 的 类 样式 。 
<h1> 新 闻 标题 </h1> 
<p> 新 闻 内 容 </p> 
<p>...</p> 


<p> 发 布 于 <span class="date">2016 年 12 月 </span>, 由 <span class="author"> 张 三 </span> 编 辑 </p> 


| 容 提示 : 在 HTML 结构 化 元 素 中 ，div 是 除了 hl 一 h6 以 外 叭 一早 于 HTMILS 出 现 的 元 素 。 在 HTML5 

| 之 前 ，div 是 包围 大 块 内 容 (如 页 眉 、 页 脚 、 主 要 内 容 、 插 图 、 附 栏 等 ) ， 是 用 CSS 为 之 
添加 样式 的 不 二 选择 。 之 前 div 没有 任何 语义 含义 ， 现 在 也 一 样 。 这 就 是 HIML5 引入 
header、footer、main、article、section、aside 和 nav 的 原因 。 这些 类 型 的 构造 块 在 网 页 中 
普遍 存在 ， 因 此 它们 可 以 成 为 具有 独立 含义 的 元 素 。 在 HTMLS5 中 ，div 并 没有 消失 ， 只 
是 使 用 它 的 场合 变 少 了 。 
对 article 和 aside 元 素 分 别 添加 一 些 CSS， 让 它们 各 自 成 为 一 栏 。 然 而 ， 大 多 数 情况 下 ， 
每 一 栏 都 有 不 止 一 个 区 块 的 内 容 。 例 如 ， 主 要 内 容 区 第 一 个 article 下 面 可 能 还 有 另 一 个 
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article (或 section、aside 等 ) 。 又 如 ， 也许 想 在 第 二 栏 再 放 一 个 aside 显示 指向 关于 其 他 
网 站 的 链接 ， 或 许 再 加 一 个 其 他 类 型 的 元 素 。 这 时 可 以 将 期 望 在 同一 栏 的 内 容 包 在 一 个 
div 内 ， 然 后 对 这 个 div 添加 相应 的 样式 。 但 是 不 可 以 用 section， 因 为 该 元 素 并 不 能 作为 | 
添加 样式 的 通用 容器 。 因 全 内 
div 没有 任何 语义 . 大 多 数 时 候 , 使 用 header、footer、 main ( 仅 使 用 一 次 ) 、article、section、 | 
aside 或 nav 代替 div 会 更 合适 。 但 是 ， 如 果 语 义 上 不 合适 , 也 不 必 为 了 刻意 避免 使 用 div， ! 
而 使 用 上 述 元 素 。div 适合 所 有 页 面容 器 ， 可 以 作为 HIMLS 的 备用 容器 使 用 。 


3.2.4 使 用 id 和 class 


HTML 是 简单 的 文档 标识 语言 ， 而 不 是 界面 语言 。 文 档 结构 大 部 分 使 用 <div> 标 签 玉 完 成 ， 为 了 能 。 于 放 
够 识别 不 同 的 结构 ， 一 般 通过 定义 这 或 slass 给 它们 赋予 额外 的 语义 ,给 CSS 样式 提供 有 效 的 “ 钧 子 ”。 


【示例 1】 构建 一 个 简单 的 列表 结构 ， 并 给 它 分 配 一 个 i4， 自 定义 导航 模块 。 
<ul id="nav"> 
<li><a hre 伍 "#"> 首 页 </a></li> 
<li><a hre 伍 "#"> 关 于 </a></li> 
<li><a hze 伍 "#"> 联 系 </a></li> 
</ul> | 
使 用 id 标识 页 面 上 的 元 素 时 ，id 名 必须 是 唯一 的 。id 可 以 用 来 标识 持久 的 结构 性 元 素 ， 例 如 主 ， 
导航 或 内 容 区 域 ，id 还 可 以 用 来 标识 一 次 性 元 素 ， 如 某 个 链接 或 表单 元 素 。 
在 整个 网 站 上 ，id 名 应 该 应 用 于 语义 相似 的 元 素 以 避免 混淆 。 例 如 ， 如 果 联系 人 表单 和 联系 人 详 | 
细 信 息 在 不 同 的 页 面 上 ， 那 么 可 以 给 它们 分 配 同 样 的 id 名 contact， 但 是 如 果 在 外 部 样式 表 中 给 它们 | 
定义 样式 ， 就 会 遇 到 问题 ,因此 使 用 不 同 的 id 名 (如 contact_form 和 contact_details) 就 会 简单 得 多 。 | 
与 id 不 同 ， 同 一 个 class 可 以 应 用 于 页 面 上 任意 数量 的 元 素 ， 因 此 class 非常 适合 标识 样式 相同 ， 
的 对 象 。 例 如 ， 设 计 一 个 新 闻 页 面 ， 其 中 包含 每 条 新 闻 的 日 期 。 此 时 不 必 给 每 个 日 期 分 配 不 同 的 ia， | 
而 是 可 以 给 所 有 日 期 分 配 类 名 date。 | 
六 提示 : 过 和 class 的 名 称 一 定 要 保持 语义 性 ， 并 与 表现 方式 无 关 。 例 如 ， 可 以 给 导航 元 素 分 配 id ， 
名 为 right nav， 因 为 希望 它 出 现在 右边 。 但 是 ， 如 果 以 后 将 它 的 位 置 改 到 左边 , 那么 CSS 
和 HTML 就 会 发 生 歧 义 。 所 以 ， 将 这 个 元 素 命 名 为 sub_nav 或 nav_main 更 合适 。 这 种 名 
称 解 释 就 不 再 涉及 如 何 表现 它 。 
class 名 称 也 是 如 此 。 例 如 ， 如 果 定义 所 有 错误 消息 以 红色 显示 ， 不 要 使 用 类 名 red， 而 应 
该 选择 更 有 意义 的 名 称 ， 如 error 或 feedback。 


< 提 注意 : class 和 id 名称 需要 区 分 大 小 写 ， 虽然 CSS 不 区 分 大 小 写 , 但 是 在 标签 中 是 否 区 分 大 小 写 
取决 于 HTML 文档 类 型 。 如 果 使 用 XHTML 严谨 型 文档 , 那么 class 和 id 名 是 区 分 大 小 写 
的 。 最 好 的 方式 是 保持 一 致 的 命名 约定 ， 如 果 在 HTML 中 使 用 驼峰 命名 法 ， 那 么 在 CSS 
中 也 采用 这 种 形式 。 
【示例 2】 在 实际 设计 中 ，class 被 广泛 使 用 ， 这 就 容易 产生 滥用 现象 。 例如， 很 多 初学 者 给 所 有 
的 元 素 添加 类 ， 以 便 更 方便 地 控制 它们 。 这 种 现象 被 称 为 “多 类 症 ”， 在 某 种 程度 上 ， 这 和 使 用 基于 
表格 的 布局 一 样 糟糕 ， 因 为 它 在 文档 中 添加 了 无 意义 的 代码 。 
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<hl class="newsHead"> 标 题 新 闻 </hl> 
<p class="newsText"> 新 闻 内 容 </p> 
<p>.…</p> 
人 | <p class="newsText"><a href="news.php" class="newsLink"> 更 多 </a></p> 
天 【示例 3] 在 上 面 示例 中 ,每 个 元 素 都 使 用 一 个 与 新 闻 相关 的 类 名 进行 标识 。 这 使 新 闻 标 题 和 正 
Note | 文 可 以 采用 与 页 面 其 他 部 分 不 同 的 样式 。 但 是 ,不 需要 用 这 么 多 类 来 区 分 每 个 元 素 。 可 以 将 新 闻 条 目 
1 放 在 一 个 包含 框 中 ， 并 加 上 类 名 news， 从 而 标识 整个 新 闻 条 目 。 然 后 ， 可 以 使 用 包含 框 选择 器 识别 
”新 闻 标题 或 文本 。 
| <div class="news"> 
<hl> 标 题 新 闻 </h1> 
<p> 新 闻 内 容 </p> 
<p>...</p> 
<p><a hre 作 "news.php"> 更 多 </a></p> 
</div> 
| 以 这 种 方式 删除 不 必要 的 类 有 助 于 简化 代码 ， 使 页 面 更 简洁 。 过 渡 依 赖 类 名 是 不 必要 的 ,我们 只 
| 需要 在 不 适合 使 用 id 的 情况 下 对 元 素 应 用 类 ， 而 且 尽 可 能 少 使 用 类 。 实 际 上 ， 创 建 大 多 数 文档 经 党 
| 只 需要 添加 几 个 类 。 如 果 初 学 者 发 现 自己 添加 了 许多 类 ， 那 么 这 很 可 能 意味 着 自己 创建 的 HTML 文 
| 档 结 构 有 问题 。 


3.2.5 使 用 tte 


| 可 以 使 用 title 属性 为 文档 中 任何 部 分 加 上 提示 标签 。 不 过 , 它们 并 不 只 是 提示 标签 加 上 它们 之 
| 后 屏幕 阅读 器 可 以 为 用 户 朗 读 title 文本 ， 因 此 使 用 title 可 以 提升 无 障碍 访问 功能 。 
| 【示例 】 可 以 为 任何 元 素 添 加 tile， 不 过 用 的 最 多 的 是 链接 。 

<ultitle=" 列 表 提示 信息 "> 

<li><a hre 合 "#" title=" 链 接 提示 信息 "> 列表 项 目 </a></li> 

< 
| 当 访 问 者 将 鼠标 光标 指向 加 了 说 明 标签 的 元 素 时 ， 就 会 显示 tile。 如 果 img 元 素 同 时 包括 tile 和 
alt 属性 ， 则 提示 框 会 采用 title 属性 的 内 容 ， 而 不 是 alt 属性 的 内 容 。 


3.2.6 ”HTML 注释 


| 可 以 在 HTML 文档 中 添加 注释 ， 标 明 区 块 开始 和 结束 的 位 置 ， 提 示 某 段 代 码 的 意图 ， 或 者 阻止 
内容 显 示 等 。 这 些 注释 只 会 在 源 代码 中 可 见 ， 访 问 者 在 浏览 器 中 是 看 不 到 它们 的 。 
【示例 】 下 面 代码 使 用 “<!-” 和 “-->” 分 隔 符 定义 了 6 处 注释 。 


<!-- 开始 页 面容 器 --> 

<div class="container"> 
<header role="banner"></header> 
<!-- 应 用 CSS 后 的 第 一 栏 -> 
<main role="main"></main> 
<!-- 结束 第 一 栏 -> 
<!-- 应 用 CSS 后 的 第 二 栏 -> 
<div class="sidebar"></div> 
<!-- 结束 第 二 栏 --> 
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<footer role="contentinfo"></footer> 
</div> 
<!- 结束 页 面容 器 -> | 
在 主要 区 块 的 开头 和 结尾 处 添加 注释 是 一 种 常见 的 做 法 , 这 样 可 以 让 一 起 合作 的 开发 人 员 将 来 修 | 
改 代码 变 得 更 加 容易 。 ~ 


在 发 布 网 站 之 前 , 应 该 用 浏览 器 查看 一 下 加 了 注释 的 页 面 ， 这样 能 帮助 用 户 避 免 由 于 弄 错 注释 格 
式 导 致 注释 内 容 直接 暴露 给 访问 者 的 情况 。 


3.3 ”构建 语义 结构 


HTMLS 新 增多 个 结构 化 元 素 ， 以 方便 用 户 创建 更 友好 的 页 面 主 体 框架 ， 下 面 来 详细 学 习 。 
3.3.1 定义 页 丑 
回 


header 表示 页 巾 ， 用 来 标识 页 面 标题 栏 。header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 视频 讲解 
常用 来 放置 整个 页 面 ， 或 者 一 个 内 容 块 的 标题 。 | 
header 也 可 以 包含 其 他 内 容 ， 如 数据 表格 、 表 单 或 相关 的 LOGO 信息 ， 一 般 整 个 页 面 的 标题 应 | 
该 放 在 页 面 的 前 面 。 | 
【示例 1】 在 一 个 网 页 内 可 以 多 次 使 用 header 元 素 ， 下 面 示例 显示 为 每 个 内 容 区 块 添加 一 个 header。 
<header> 
<hl> 网 页 标题 </h1> 
</header> 
<article> 
<header> 
<h1> 文 章 标题 </h1> 
</header> 
<p> 文 章 正 文 </p> 
</article> 


在 HIML5 中 , header 内 部 可 以 包含 hl1~h6 元 素 , 也 可 以 包含 hgroup、table、form、nav 等 元 素 ， 
只 要 应 该 显示 在 头 部 区 域 的 标签 ， 都 可 以 包含 在 header 元 素 中 。 
【示例 2】 下 面 示例 是 个 人 博客 首页 的 头 部 区 域 ， 整 个 头 部 内 容 都 放 在 header 元 素 中 。 
<header> 
<hgroup> 
<hl>LOGO</hl> 
<a href="#">[URL]</a> <a hre 人 f="#">[ 订 阅 ]</a> <a hre 伍 "#">[ 手 机 订阅 ]</a> </hgroup> 
<nav> 
<ul> 
<I 记 首页 </li> 
<li><a hre 伍 "#"> 目 录 </a></li> 
<li><a href="#"> 社 区 </a></li> 
<li><a href="#"> 微 博 我 </a></li> 
<u> 
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3.3.2 ”定义 导航 
* nav 表示 导航 条 ， 用 来 标识 页 面 导航 的 链接 组 。 一 个 页 面 中 可 以 拥有 多 个 nav， 作 为 页 面 整 体 或 
不 同 部 分 的 导航 ， 具 体 应 用 场景 如 下 。 


| 主 菜单 导航 。 一 般 网 站 都 设置 有 不 同 层级 的 导航 条 ， 其 作用 是 在 站 内 快速 切换 ， 如 主 菜单 、 
Note | 置顶 导航 条 、 主 导航 图 标 等。 
| 侧 边栏 导航 。 现 在 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边栏 导航 ， 其 作用 是 将 页 面 从 当前 文章 
或 当前 商品 跳 转 到 相关 文章 或 商品 页 面 上 去 。 
回 ”页 内 导航 。 就 是 页 内 锚 点 链接 ， 其 作用 是 在 本 页 面 几 个 主要 的 组 成 部 分 之 间 进 行 跳 转 。 
回 ” 翻 页 操作 。 翻 页 操作 是 指 在 多 个 页 面 的 前 后 页 或 博客 网 站 的 前 后 篇 文章 滚动 。 
| 并 不 是 所 有 的 链接 组 都 要 被 放 入 nav 元 素 中 ， 只 需要 将 主要 的 、 基 本 的 链接 组 放 入 nav 元 素 中 即 
| 可 。 例如， 在 页 脚 中 通常 会 有 一 组 链接 ， 包括 服务 条 款 、 首页 、 版 权 声 明 等 ， 这 时 使 用 footer 元 素 是 
| 最 恰当 。 
【示例 1】 在 HIML5 中 ， 只 要 是 导航 性 质 的 链接 ， 我 们 就 可 以 很 方便 地 将 其 放 入 nav 元 素 中 。 
该 元 素 可 以 在 一 个 文档 中 多 次 出 现 ， 作 为 页 面 或 部 分 区 域 的 导航 。 
| <nav draggable="true"> 
<a href="index.html"> 首 页 </a> 
<a href="book.html"> 图 书 </a> 
<a href="bbs.html"> 论 坛 </a> 
</nav> 


上 述 代码 创建 了 一 个 可 以 拖 动 的 导航 区 域 ,nav 元素 中 包含 了 3 个 用 于 导航 的 超 链接 , 即 “ 首 页 ” 
“图 书 ” 和 “论坛 >。 该 导航 可 用 于 全 局 导航 ， 也 可 放 在 某 个 段落 ， 作 为 区 域 导 航 。 
【示例 2】 下 面 示例 页 面 由 多 部 分 组 成 ， 每 部 分 都 带 有 链接 ， 但 只 将 最 主要 的 链接 放 入 了 nav 元 


| 素 中 。 
| <hl> 技 术 资料 <hl> 


<nav> 


<li><a hre 伍 "/"> 主 页 </a></li> 
<li><a hre 伍 "/blog"> 博 客 </a></li> 
</u> 
</nav> 
<article> 
<header> 
<hl>HTML5+CSS3</hl> 
<nav> 
<uUl> 
<li><a href=-"#HTML5">HTML5</a></li> 
<li><a href="#CSS3">CSS3</a></li> 
</ul> 
</nav> 
</header> 
<section id="HTML5"> 
<hl>HIML5</hl> 
<p>HTMLS5 特性 说 明 </p> 
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</section> 

<section id="CSS3"> 
<hl>CSS3</hl> | 
<p>CSS3 特性 说 明 。</p> | y 

</section> | 

<footer> | 医 网 

<p> <a hre 仁 "?edit"> 编 辑 </a> | <a hre 仁 "?delete"> 删 除 </a> | <a hre 合 "72add"> 添 加 </a> </p> Note 

</footer> | 

</article> | 

<footer> | 
<p><small> 版 权 信息 </small></p> 

</footer> 


在 这 个 例子 中 ， 第 一 个 nav 元 素 用 于 页 面 导航 ， 将 页 面 跳 转 到 其 他 页 面 上 去 ， 如 跳 转 到 网 站 主页 
或 博客 页 面 ， 第 二 个 nav 元 素 放置 在 article 元 素 中 ， 表 示 在 文章 中 内 进行 导航 。 除 此 之 外 ，nav 元 素 | 
也 可 以 用 于 其 他 所 有 你 觉得 是 重要 的 、 基 本 的 导航 链接 组 中 。 | 


爷 注意 ， 不 要 用 menu 元 素 代 蔡 nav 元素。menu 主要 用 在 一 系列 交互 命令 的 菜单 上 ， 如 快捷 菜 单 。 


3.3.3 ”定义 主要 区 域 


main 表示 主要 ， 用 来 标识 网 页 中 的 主要 内 容 。main 内 容 对 于 文档 来 说 应 当 是 唯一 的 ， 它 不 应 包 
含 在 网 页 中 重复 出 现 的 内 容 ， 如 侧 栏 、 导 航 栏 、 版 权 信 息 、 站 点 标志 或 搜索 表单 等 。 
< 注意 : 由 于 main 元 素 不 对 页 面 内 容 进行 分 区 或 分 块 ， 所 以 不 会 对 网 页 大 纲 产 生 影响 。 
【示例 】 下 面 页 面 是 一 个 完整 的 主体 结构 。main 元 素 包围 着 代表 页 面 主题 的 内 容 。 
<header role="banner"> 
<nav role="navigation">[ 包 含 多 个 链接 的 ul]</nav> 
</header> 
<main role="main"> 
<article> 
<hl id="gaudi"> 主 要 标题 <hl> 
<p>[ 页 面 主要 区 域 的 其 他 内 容 ] 
</article> 
</main> 
<aside role="complementary"> 
<hl> 侧 边 标题 </h1> 
<p>[ 附 注 栏 的 其 他 内 容 ] 
</aside> 
<footer role="info">[ 版 权 ]</footer> 


main 元 素 在 一 个 页 面 里 仅 使 用 一 次 。 在 main 开始 标签 中 加 上 role="main",， 这样 可 以 帮助 屏幕 阅 
读 器 定位 页 面 的 主要 区 域 。 | 
与 p、header、footer 等 元 素 一 样 ，main 元 素 的 内 容 显 示 在 新 的 一 行 ， 除 此 之 外 不 会 影响 页 面 的 | 
任何 样式 。 如 果 创 建 的 是 Web 应 用 ， 应 该 使 用 main 包围 其 主要 的 功能 。 | 


< 人 注意 : 不 能 将 main 放置 在 article、aside、footer、header 或 nav 元 素 中 。 


| 
人 
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3.3.4 定义 文章 块 


article 表示 文章 ， 用 来 标识 页 面 中 一 块 完整 的 、 独 立 的 、 可 以 被 转发 的 内 容 。 
【示例 1】 下 面 示例 演示 了 article 元 素 的 应 用 。 
<header role="banner"> 
| <nav role="navigation">[ 包 含 多 个 链接 的 ul]</nav> 
<header> 
<main role="main"> 
<article> 
| <hl id="news"> 区 块 链 “ 时 代号 ”列车 驶 来 </h1> 
| <p> 对 于 精英 们 来 说 ， 这 个 春节 有 点 特殊 。</p> 
<p> 他 们 身 在 曹 营 心 在 汉 ， 他 们 被 区 块 链 撑 动 得 燥热 难耐 ， 在 兴奋 、 焦 虑 、 恐 慌 、 质 疑 中 度 过 一 个 
漫长 春节 。</p> 
<h2 id="sub1">1. 三 点 钟 无 眠 </h2> 
<p><img src="images/0001.jpg" width="200" /> 春节 期 间 ， 一 个 大 佬 云集 的 区 块 链 群 建立 ， 因 为 有 
蔡 文 胜 、 莅 蛮 子 、 徐 小 平等 人 的 参与 ， 群 被 封 上 了 “市 值 万 亿 ”。 这 个 名 为 “三 点 钟 无 眠 区 块 链 ” 的 群 ， 搅 动 了 
一 池 春 水 。</p> 
<h2 id="sub2">2. 被 碾 压 的 春节 </h2> 


<p>.….</p> 
</article> 
</main> 


为 了 精简 ， 本 示例 对 文章 内 容 进行 了 缩写 ， 略 去 了 nav 结构 代码 。 尽 管 在 这 个 例子 里 只 有 段落 和 
图 像 ， 但 article 可 以 包含 各 种 类 型 的 内 容 。 

现在 ， 页 面 有 了 header、nav、main 和 article 元 素 ， 以 及 它们 各 自 的 内 容 。 在 不 同 的 浏览 器 中 ， 
article 中 标题 的 字号 可 能 不 同 。 可 以 应 用 CSS 使 它们 在 不 同 的 浏览 器 中 显示 相同 的 大 小 。 

在 HIML5 中 ，article 元 素 表示 文档 、 页 面 、 应 用 或 网 站 中 一 个 独立 的 容器 ， 原 则 上 是 可 独立 分 
| 配 或 可 再 用 的 。 它 可 以 是 一 篇 论坛 帖子 、 一 篇 杂志 或 报纸 文章 、 一 篇 博客 条 目 、 一 则 用 户 提交 的 评论 、 
| 一 个 交互 式 的 小 部 件 或 小 工具 ,或 者 任何 其 他 独立 的 内 容 项 。 其 他 article 的 例子 包括 电影 或 音乐 评论 、 
| 案例 研究 、 产 品 描述 等 。 这 些 确定 是 独立 的 、 可 再 分 配 的 内 容 项 。 

可 以 将 article 撕 套 在 另 一 个 article 中 ， 只 要 里 面 的 article 与 外 面 的 article 是 部 分 与 整体 的 关系 。 
| 一 个 页 面 可 以 有 多 个 article 元 素 。 例 如 ， 博 客 的 主页 通常 包括 几 篇 最 新 的 文章 ， 其 中 每 一 篇 都 是 其 自 
| 身 的 article。 一 个 article 可 以 包含 一 个 或 多 个 section 元 素 。 在 article 里 包含 独立 的 hl 一 h6 元 素 。 
【示例 2〗】 上 面 示例 只 是 使 用 article 的 一 种 方式 ， 下 面 展 示 其 他 的 用 法 。 下 面 示例 展示 了 对 基本 
| 的 新 闻 报 道 或 报告 进行 标记 的 方法 。 注 意 footer 和 address 元 素 的 使 用 。 这 里 ，address 只 应 用 于 其 父 
元素 article 〈 即 这 里 显示 的 article)， 而 非 整个 页 面 或 任何 嵌 套 在 那个 article 里 面 的 article。 


| <article> 

| <hl id="news'> 区 块 链 “ 时 代号 ”列车 驶 来 </h1> 
| <p> 对 精英 们 来 说 ， 这 个 春节 有 点 特殊 。</p> 

| <!-- 文章 的 页 脚 ， 并 非 页 面 级 的 页 脚 -> 

| <footer> 

| <p> 出 处 说 明 </p> 

| <address> 

| 访问 网 址 <a href="https://wwwhuxiu.com/article/233472.html"> 虎 噢 </a> 
| </address> 
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</footer> | 
</article> | 


【示例 3】 下 面 示例 展示 了 嵌 套 在 父 元 素 article 内 的 article 元 素 。 该 例 中 谋 套 的 article 是 用 户 提 | 
交 的 评论 , 就 像 在 博客 或 新 闻 网 站 上 见 到 的 评论 部 分 。 该 例 还 显示 了 section 元 素 和 time 元 素 的 用 法 。 | 仁 内 
这 些 只 是 使 用 article 及 有 关 元 素 的 几 个 常见 方式 。 | 
本 天 Note 
<hl id="news"> 区 块 链 “ 时 代号 ”列车 驶 来 <hl> | 
<p> 对 于 精英 们 来 说 ， 这 个 春节 有 点 特殊 。</p> 
<section> 
<h2> 读 者 评论 </h2> 
<article> 
<footer> 发 布 时 间 | 
<time datetime="2018-02-20">2018-2-20</time> | 
</footer> 
<p> 评 论 内 容 </p> 
</article> 
<article>[ 下 一 则 评论 ]</article> 
</section> 
</article> 


每 条 读者 评论 都 包含 在 一 个 article 内 ， 这 些 article 元 素 则 柑 套 在 主 article 内 。 
3.3.5 ”定义 区 块 


section 表示 区 块 ， 用 于 标识 文档 中 的 节 ， 在 页 面 上 多 对 内 容 进行 分 区 。 例 如 ， 章节、 页 眉 、 页 脚 | 
或 文档 中 的 其 他 部 分 。 
【辨析 】 | 
div 元 素 也 可 以 用 来 对 页 面 进行 分 区 ， 但 section 元 素 并 非 一 个 普通 的 容器 。 当 一 个 容器 需要 被 直 | 
接 定义 样式 或 通过 脚本 定义 行为 时 ， 推 荐 使 用 div， 而 非 section 元 素 。 | 
div 元 素 关注 结构 的 独立 性 ， 而 section 元 素 关注 内 容 的 独立 性 ，section 元 素 包 含 的 内 容 可 以 单独 
存储 到 数据 库 中 ， 或 输出 到 Word 文档 中 。 | 
【示例 1】 一 个 section 区 块 通常 由 标题 和 内 容 组 成 。 下 面 示例 使 用 section 元 素 包 训 排行 版 的 内 | 
容 ， 作 为 一 个 独立 的 内 容 块 进行 定义 。 | 
<section cite="http://music.baidu.com/"> | 
<hl> 新 歌 榜 </h1> | 
<ol> 

<li><a hre 舍 "#"> 和 爸爸 去 哪儿 <p class="ui-li-aside"> 群星 </p></a></li> 
<li><a hre 合 "#"> 爱 ， 不 解释 儿 <p class="ui-li-aside"> 张杰 </p></a></li> 
<li><a hre 伍 "#"> 爱 无 反 顾 儿 <p class="ui-li-aside"> 姚 贝 娜 </p></a></li> | 
<li><a hre 伟 "和 > 房间 儿 <p class="ui-li-aside"> 刘 瑞 琦 </p></a></li> | 
<li><a hre 伟 "和 > 动人 的 传说 儿 <p class="ui-li-aside"> 杭 娇 </p></a></li> | 
<li><a hre 伍 "#"> 泼 墨 儿 <p class="ui-li-aside"> 周华健 </p></a></li> | 
<li><a hre 合 "> 一 起 摇摆 儿 <p class="ui-li-aside"> 汪峰 </p></a></li> | 

<li><a hre 伍 "#"> 就 当 是 你 儿 <p class="ui-li-aside"> 许诺 </p> </a></li> 
<li><a hre 伍 "#">Summer 儿 <p class="ui-li-aside"> 吉 克 和 货 逸 </p></a></li> 

<li><a hre 伍 "#"> 不 值得 儿 <p class="ui-li-aside"> 曾 一 鸣 </p></a></li> 
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</section> 


section 元 素 包含 cite 属性 ， 用 来 定义 section 的 URL。 如 果 section 摘自 Web 的 话 ， 可 以 设置 该 
属性 。 
【辨析 】 
article 和 section 都 是 HTMLS5 新 增 的 元 素 ， 它 们 都 是 用 来 区 分 不 同 内 容 ， 用 法 也 相似 ， 从 语义 角 
度 分 析 二 者 区 分 很 大 。 
回 article 代表 文档 、 页 面 或 者 应 用 程序 中 独立 、 完 整 的 可 以 被 外 部 引用 的 内 容 。 因 为 article 是 
一 段 独 立 的 内 容 ， 所 以 article 通常 包含 header 和 footer 结构 。 
section 用 于 对 网 站 或 者 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。 一 个 section 通常 由 内 容 和 标题 
组 成 。 因 此 ， 需 要 包含 一 个 标题 ， 一 般 不 用 包含 header 或 者 footer 结构 。 
通常 使 用 section 元 素 为 那些 有 标题 的 内 容 进行 分 段 ， 类 似 文章 分 段 操 作 。 相 邻 的 section 内 容 ， 
应 当 是 相关 的 ， 而 不 像 article 之 间 各 自 独 立 。 
【示例 2】 下 面 示例 混用 article 和 section 元 素 , 从 语义 上 比较 二 者 不 同 。article 内 容 强调 独立 性 、 
完整 性 ，section 内 容 强 调 相关 性 。 
<article> 
<header> 
<h1> 蝶 恋 花 </h1> 
<h2> 晏 殊 </h2> 
</header> 
<p> 槛 菊 愁 烟 兰 泣 露 ， 罗 幕 轻 寒 ， 燕 子 双飞 去 。 明 月 不 说 离 恨 苗 ， 斜 光 到 晓 穿 朱 户 。</p> 
<p> 昨 和 夜 西风 凋 碧 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 。 欲 寄 彩 得 兼 尺 素 ， 山 长 水 阔 知 何 处 。</p> 
<section> 
<h2> 解 析 </h2> 
<article> 
<h3> 注 释 </h3> 
<p> 槛 : 栏杆 。</p> 
<p> 罗 幕 : 丝 罗 的 帷幕 ， 富 贵人 家 所 用 。</p> 
<p> 朱 户 : 狂言 朱 门 ， 指 大 户 人 家 。</p> 
<p> 尺 素 : 书信 的 代称 。</p> 
</article> 
<article> 
<h3> 评 析 </h3> 
<p> 此 词 经 下 光 的 笔墨 、 温 婉 的 格调 、 谨 严 的 章法 ， 传 达 出 作者 的 莫 秋 怀 人 之 情 。 </p> 
<p> 上 片 由 苑 中 景物 起 笔 ， 下 片 写 登楼 望 远 。 以 无 可 奈何 的 帐 问 作 结 ， 给 人 情 也 悠悠 、 恨 也 悠 
悠 之 感 。 </p> 
</article> 
</section> 
</article> 


【追问 】 
既然 article、section 是 用 来 划分 区 域 的 ， 又 是 HIMLS 的 新 元 素 ， 那么 是 否 可 以 用 article、section 
取代 div 来 布局 网 页 呢 ? 
答案 是 否定 的 ，div 的 用 处 就 是 用 来 布局 网 页 ， 划 分 大 的 区 域 ， 所 以 我 们 习惯 性 的 把 div 当成 了 一 
个 容器 。 而 HIMLS 改变 了 这 种 用 法 ， 它 让 div 的 工作 更 纯正 。div 就 是 用 来 布局 的 ， 在 不 同 的 内 容 块 
中 , 我 们 按照 需求 添加 article、section 等 内 容 块 , 并 且 显 示 其 中 的 内 容 , 这 样 才 是 合理 的 使 用 这 些 元 素 。 
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因此 ， 在 使 用 section 元 素 时 应 该 注意 如 下 几 个 问题 。 | 
回 不 要 将 section 元 素 当 作 设 置 样式 的 结构 容器 ， 对 于 此 类 操作 应 该 使 用 div 元 素 实现 。 | 


回 如果 article、aside 或 nav 元 素 更 符合 语义 使 用 条 件 ， 不 要 首选 使 用 section 元 素 。 

回 “不 要 为 没有 标题 的 内 容 区 块 使 用 section 元 素 。 

【补充 】 

使 用 HIMLS 大 纲 工 具 (http://gsnedders.html5.org/outliner/) 来 检查 页 面 中 是 否 有 没 标题 的 section， Note 
如 果 使 用 该 工具 进行 检查 后 , 发 现 某 个 section 的 说 明 中 有 untitiled section (没有 标题 的 section) 文字 ， | 
这 个 section 就 有 可 能 使 用 不 当 ， 但 是 nav 元 素 和 aside 元 素 没有 标题 是 合理 的 。 | 
【示例 3】 下 面 示例 进一步 演示 了 article 和 section 混用 的 情景 。 | 
<article> | 
<hl>W3C</hl> 
<p> 万 维 网 联盟 (World Wide Web Consortium，W3C)， 又 称 W3C 理事 会 。1994 年 10 月 在 麻 省 理工 学 ， 
院 计算 机 科学 实验 室 成 立 。 建 立 者 是 万 维 网 的 发 明 者 带 姆 &middot; 伯 纳 斯 - 李 。</p> | 
<section> | 
<h2>CSS</h2> | 
<p> 全 称 Cascading Style Sheet， 级 联 样式 表 ， 通 常 又 称 为 "风格 样式 表 (Style Sheet) "， 它 是 用 来 | 
进行 网 页 风格 设计 的 。</p> | 


</section> | 
<section> | 
<h2>HTML</h2> | 

<p> 全 称 Hypertext Markup Language， 超 文本 标记 语言 ， 用 于 描述 网 页 文档 的 一 种 标记 语言 。</p> | 
</section> | 
</article> | 


在 上 面 示例 中 ， 首 先 可 以 看 到 整个 版 块 是 一 段 独 立 的 、 完 整 的 内 容 ， 因 此 使 用 article 元 素 标识 。 
该 内 容 是 一 篇 关于 W3C 的 简介 , 该 文章 分 为 3 段 , 每 一 段 都 有 一 个 独立 的 标题 ,因此 使 用 了 两 个 section | 
元 素 区 分 。 | 
【追问 】 | 
为 什么 没有 对 第 一 段 使 用 section 元 素 呢 ? | 
其 实 是 可 以 使 用 的 ， 但 是 由 于 其 结构 比较 清晰 ， 浏 览 器 能 够 识别 第 一 段 内 容 在 一 个 section 内 ， 
所 以 也 可 以 将 第 一 个 section 元 素 省 略 ， 但 是 如 果 第 一 个 section 元 素 里 还 要 包含 子 section 元 素 或 子 
article 元 素 ， 那 么 就 必须 标识 section 元 素 。 
【示例 4】 下 面 是 一 个 包含 article 元 素 的 section 元 素 示例 。 
<section> | 
<hl>W3C</hl> | 
<article> 
<h2>CSS</h2> 
<p> 全 称 Cascading Style Sheet， 级 联 样式 表 ， 通 常 又 称 为 "风格 样式 表 (Style Sheet) "， 它 是 用 来 | 
进行 网 页 风格 设计 的 。</p> | 
</article> | 
<h2>HTML</h2> | 
<p> 全 称 Hypertext Markup Language， 超 文本 标记 语言 ， 用 于 描述 网 页 文档 的 一 种 标记 语言 。</p> | 
</section> 
这 个 示例 比 第 一 个 示例 复杂 了 一 些 。 首 先 ， 它 是 一 篇 文章 中 的 一 段 ， 因 此 没有 使 用 article 元 素 。 
但 是 ， 在 这 一 段 中 有 几 块 独立 的 内 容 ， 所 以 嵌入 了 几 个 独立 的 article 元 素 。 | 
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在 HTML5 中 ，article 可 以 是 一 种 特殊 功能 的 section 元 素 ， 它 比 section 元 素 更 强调 独立 性 。 即 
| section 元 素 强调 分 段 或 分 块 ， 而 article 强调 独立 性 。 具 体 来 说 ， 如 果 一 块 内 容 相对 来 说 比较 独立 、 完 
” 整 时 ， 应 该 使 用 article 元 素 ， 但 是 如 果 想 将 一 块 内 容 分 成 几 段 时 ， 应 该 使 用 section 元 素 。 
仿 候 在 HIML5 中 ，div 变 成 了 一 种 容器 ， 当 应 用 CSS 样式 时 ， 可 以 对 这 个 容器 进行 一 个 总 体 的 CSS 
= 一 样式 的 套用 。 因 此 ， 可 以 将 页 面 的 所 有 从 属 部 分 ， 如 导航 条 、 菜 单 、 版 权 说 明 等 ， 包 含 在 一 个 统一 的 
Note | 页面 结构 中 ， 以 便 统一 使 用 CSS 样式 来 进行 装饰 。 


3.3.6 ”定义 附 栏 


aside 表示 侧 边 ， 用 来 标识 所 处 内 容 之 外 的 内 容 。aside 内 容 应 该 与 所 处 的 附近 内 容 相关 。 例 如 ， 
8 | 当前 页 面 或 文章 的 附属 信息 部 分 , 它 可 以 包含 与 当前 页 面 或 主要 内 容 相 关 的 引用 、 侧 边 广告 、 导 航 条 ， 
加 加 由 器 | 以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。 
aside 元 素 主 要 有 如 下 两 种 用 法 。 
回 “” 作 为 主体 内 容 的 附属 信息 部 分 ， 包 含 在 article 中 ，aside 内 容 可 以 是 与 当前 内 容 有 关 的 参考 
资料 、 名 词 解释 等 。 
【示例 1】 下 面 示例 设计 一 篇 文章 ,文章 标 题 放 在 header 中 , 在 header 后 面 将 所 有 关于 文章 的 部 
分 放 在 了 一 个 article 中 ,将 文章 正文 放 在 一 个 p 元 素 中 。 该 文章 包含 一 个 名 词 注释 的 附属 部 分 ， 因 此 
在 正文 下 面 放 置 了 一 个 aside 元 素 ， 用 来 存放 名 词 解释 的 内 容 。 
<header> 
<hl>HTML5</hl> 
</header> 
<article> 
<hl>HTMLS 历史 </h1> 
<p>HTML5 草案 的 前 身 名 为 Web Applications 1.0, 于 2004 年 被 WHATWG 提出 , 于 2007 年 被 W3C 接 
纳 ， 并 成 立 了 新 的 HTML 工作 团队 。HTMLS 的 第 一 份 正式 草案 已 于 2008 年 1 月 22 日 公布 。 2014 年 10 月 28 
日 ，W3C 的 HTML 工作 组 正式 发 布 了 HTML5 的 官方 推荐 标准 。</p> 
<aside> 
<hl> 名 词 解释 </h1> 
<dl> 
<dt>WHATWG</dt> 
<dd>Web Hypertext Application Technology Working Group,HTML 工作 开发 组 的 简称 ， 目 前 与 
W3C 组 织 同时 研发 HTML5。</dd> 
</d> 
<dl> 
<dt>W3C</dt> 
<dd>World Wide Web Consortium， 万 维 网 联盟 ， 万 维 网 联盟 是 国际 著名 的 标准 化 组 织 。1994 
年 成 立 后 ， 至 今 已 发 布 近 百 项 相关 万 维 网 的 标准 ， 对 万 维 网 发 展 做 出 了 杰出 的 贡献 。</dd> 
</d> 
</aside> 
</article> 


这 个 aside 被 放置 在 一 个 article 内 部 ， 因 此 引擎 将 这 个 aside 内 容 理解 为 与 article 内 容 相 关联 。 
作为 页 面 或 站 点 辅助 功能 部 分 ， 在 article 之 外 使 用 。 最 典型 的 形式 是 侧 边 栏 ， 其 中 的 内 容 可 
以 是 友情 链接 、 最 新 文章 列表 、 最 新 评论 列表 、 历 史 存档 、 日 历 等 。 
【示例 2】 下 面 代码 使 用 aside 元 素 为 个 人 博客 添加 一 个 友情 链接 辅助 版 块 。 
<aside> 
<nav> 
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<h2> 友 情 链接 </h2> 
<u> 
<li> <a hre 伍 "#"> 网 站 1</a></li> 
<li> <a hre 伍 "#"> 网 站 2</a></li> | 
<li> <a hre 伍 #"> 网 站 3</a></li> | 
</ul> | 屋内 
</nav> WA 
(2X2 
</aside> | 


友情 链接 在 博客 网 站 中 比较 常见 ， 一 般 放 在 左右 两 侧 的 边栏 中 ， 因 此 可 以 使 用 aside 来 实现 ， 但 
是 这 个 版 块 又 具有 导航 作用 ， 因 此 嵌 套 了 一 个 nav 元 素 ， 该 侧 边栏 的 标题 是 “友情 链接 ”， 放 在 了 h2 | 
元 素 中 ， 在 标题 之 后 使 用 了 一 个 ud 列表， 用 来 存放 具体 的 导航 链接 列表 。 


3.3.7 ”定义 页 肢 


footer 表示 脚注 ， 用 来 标识 文档 或 节 的 页 脚 。footer 元 素 表 示 翌 套 它 的 最 近 的 article、aside、 | 
blockquote、body、details、fieldset、figure、nav、section 或 td 元 素 的 页 脚 。 只 有 当 距 它 最 近 的 祖先 | 
是 body 时 ， 它 才 是 整个 页 面 的 页 脚 。 
如 果 一 个 footer 包 着 它 所 在 区 块 〈 如 一 个 article) 的 所 有 内 容 ， 它 代表 的 是 像 附 录 、 索 引 、 版 权 | 
页 、 许 可 协议 这 样 的 内 容 。 | 
页 脚 通常 包含 关于 它 所 在 区 块 的 信息 , 如 指向 相关 文档 的 链接 、 版 权 信 息 、 作 者 及 其 他 类 似 条 目 。 | 
页 脚 并 不 一 定 要 位 于 所 在 元 素 的 末尾 ， 不 过 通常 是 这 样 的 。 | 
【示例 1】 在 下 面 示例 中 ， 这 个 footer 代表 页 面 的 页 脚 ， 因 为 距 它 最 近 的 祖先 是 body 元 素 。 
<header role="banner"> 
<nav role="navigation"> 链 接 列表 </nav> 
</header> 
<main role="main"> 
<article> 
<hl id="gaudi"> 主 要 标题 </h1> 
<h2> 次 标题 </h2> 
</article> 
</main> 
<aside role="complementary"> 
<hl> 次 标题 </h1> 
</aside> 
<footer> 
<p><small> 版 权 信息 </small></p> 
</footer> 


页 面 有 了 header、nav、main、article、aside 和 footer 元 素 ， 当 然 并 非 每 个 页 面 都 需要 以 上 所 有 元 | 
素 ， 但 它们 代表 了 HTML 中 的 主要 页 面 构成 要 素 。 
footer 元 素 本 身 不 会 为 文本 添加 任何 默认 样式 。 这里， 版权 信 息 的 字号 比 普通 文本 的 小 ， 这 是 因 ， 
为 它 嵌 套 在 small 元 素 里 。 像 其 他 内 容 一 样 ， 可 以 通过 CSS 修改 footer 元 素 所 含 内 容 的 字号 。 | 


痊 提示 : 不 能 在 footer 里 谈 套 header 或 另 一 个 footer. 同时 ，, 也 不 能 将 footer 嵌 套 在 header 或 address 
元 素 里 。 | 


【示例 2】 在 下 面 示例 中 ， 第 一 个 footer 包含 在 article 内 ， 因 此 是 属于 该 article 的 页 脚 。 第 二 个 L 
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Cr 
”footer 是 页 面 级 的 。 只 能 对 页 面 级 的 footer 使 用 role="contentinfo"， 且 一 个 页 面 只 能 使 用 一 次 。 
ae 
| <h1> 文 章 标题 </h1> 

会 内 | <p> 文 章 内 容 </p> 
sl | <footer> 
| <p> 注 释 信 息 </p> 

<address><a href="#">W3C</a></address> 

| </footer> 
</article> 
<footer role="contentinfo"> 版 权 信 息 </footer> 


3.3.8 使 用 role 


| role 是 HTMLS5 新 增 属性 ， 其 作用 是 告诉 Accessibility 类 应 用 〈 如 屏幕 阅读 器 等 ) 当前 元 素 所 扮 
| 演 的 角色 ， 主 要 是 供 残 疾 人 使 用 。 使 用 role 可 以 增强 文本 的 可 读 性 和 语义 化 。 
| 在 HTML5 元 素 内 ,标签 本 身 就 是 有 语义 的 ， 因 此 role 作为 可 选 属性 使 用 ， 但 是 在 很 多 流行 的 框 
| 架 〈 如 Bootstrap) 中 都 很 重视 类 似 的 属性 和 声明 ， 目 的 是 为 了 兼容 老 版 本 的 浏览 器 〈 用 户 代理 )。 
| role 属性 主要 应 用 于 文档 结构 和 表单 中 。 例 如 ， 设 置 输入 密码 框 ， 对 于 正常 人 可 以 用 placaholder 
| 提示 输入 密码 ， 但 是 这 对 于 残障 人 士 是 无 效 的 ， 这 时 就 需要 role。 另 外 ， 在 老 版 本 的 浏览 器 中 ， 由 于 
| 不 支持 HTMLS 标签 ， 所 以 有 必要 使 用 role 属性 。 
| 例如 ， 下 面 代码 告诉 屏幕 阅读 器 ， 此 处 有 一 个 复 选 框 ， 且 已 经 被 选中 。 

<div role="checkbox" aria-checked="checked"> <input type="checkbox" checked></div> 

下 面 是 常用 的 role 角色 值 。 

1. role="banner" (横幅 ) 
| 面向 全 站 的 内 容 ， 通 常 包 含 网 站 标志 、 网 站 赞助 者 标志 、 全 站 搜索 工具 等 。 横 幅 通 常 显 示 在 页 面 
| 的 顶端 ， 而 且 通 常 横 跨 整 个 页 面 的 宽度 。 
| 使 用 方法 : 将 其 添加 到 页 面 级 的 header 元 素 ， 每 个 页 面 只 用 一 次 。 

2. role="navigation" (导航 ) 

文档 内 不 同 部 分 或 相关 文档 的 导航 性 元 素 通常 为 链接 ) 的 集合 。 
| 使 用 方法 : 与 nav 元 素 是 对 应 关系 。 应 将 其 添加 到 每 个 nav 元 素 , 或 其 他 包含 导航 性 链接 的 容器 。 
| 这 个 角色 可 在 每 个 页 面 上 使 用 多 次 ， 但 是 同 nav 一 样 ， 不 要 过 度 使 用 该 属性 。 
| 3. role="main" (主体 ) 

文档 的 主要 内 容 。 
| 使 用 方法 : 与 main 元 素 是 对 应 关系 。 最 好 将 其 添加 到 main 元 素 ， 也 可 以 添加 到 其 他 表示 主体 内 
| 容 的 元 素 〈 可 能 是 div)。 在 每 个 页 面 仅 使 用 一 次 。 
| 4. role="complementary" (补充 性 内 容 ) 

文档 中 作为 主体 内 容 补 充 的 支撑 部 分 。 它 对 区 分 主体 内 容 是 有 意义 的 。 
| 使 用 方法 : 与 aside 元 素 是 对 应 关系 。 应 将 其 添加 到 aside 或 div 元 素 〈 前 提 是 该 div 仅 包含 补充 
| 性 内 容 )。 可 以 在 一 个 页 面 里 包含 多 个 complementary 角色 ， 但 不 要 过 度 使 用 。 
| 5. role="contentinfo" (内 容 信息 ) 

包含 关于 文档 的 信息 的 大 块 、 可 感知 区 域 。 这 类 信息 的 例子 包括 版 权 声明 和 指向 隐私 权 声 明 的 链 
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接 等 


使 用 方法 : 将 其 添加 至 整个 页 面 的 页 脚 ( 通 常 为 footer 元 素 )。 每 个 页 面 仅 使 用 一 次 。 
【示例 】 下 面 代码 演示 了 文档 结构 中 如 何 应 用 role。 


<!-- 开始 页 面容 器 -> | 全 7 
<div class="container"> | Se 
<header role="banner"> ALo 
<nav role="navigation">[ 包 含 多 个 链接 的 列表 ]</nav> | 
</header> | 


<!-- 应 用 CSS 后 的 第 一 栏 -> 

<main role="main"> 
<article></article> 
<article></article> 


<!-- 应 用 CSS 后 的 第 二 栏 -> 
<div class="sidebar"> 
<aside role="complementary"></aside> 
<aside role="complementary"></aside> 
[其 他 区 块 ] 
</div> 
<!-- 结束 第 二 栏 --> 
<footer role="contentinfo"></footer> 
</div> 
<!-- 结束 页 面容 器 --> 


< 注 意 ， 即 便 不 使 用 role 角色 ， 页 面 看 起 来 也 没有 任何 差别 ， 但 是 使 用 它们 可 以 提升 使 用 辅助 设 ， 
备 的 用 户 的 体验 。 出 于 这 个 理由 ， 推 荐 使 用 它们 。 
对 表单 元 素来 说 ，form 角色 是 多 余 的 ; search 用 于 标记 搜索 表单 ; application 则 属于 高 级 | 
用 法 。 当然, 不 要 在 页 面 上 过 多 地 使 用 地 标 角色 。 过 多 的 role 角色 会 让 屏幕 阅读 器 用 户 感 
到 累 资 ， 从 而 降低 role 的 作用 ， 影 响 整 体 体验 。 | 


3.4 案例 实战 


本 节 将 借助 HTMLS5 新 元 素 设计 一 个 博客 首页 。 
【操作 步骤】 

(1) 新 建 HIMLS 文档 ， 保 存 为 testl .html。 | 

(2) 根据 上 面 各 节 介绍 的 知识 ， 开 始 构建 个 人 博客 首页 的 框架 结构 。 在 设计 结构 时 ， 最 大 限度 | 

地 选用 HIML5 新 结构 元 素 ， 所 设计 的 模板 页 面 基本 结构 如 下 所 示 。 | 
<header> | 
<h1>[ 网 页 标题 ]</h1> | 

<h2>[ 次 级 标题 ]</h2> | 

<h4>[ 标 题 提示 ]</h4> | 
</header> | 
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<nav> 

<h3>[ 导 航 栏 ]</h3> 

<a hre 人 ="#"> 链 接 1</a> <a hre 仁 "#"'> 链 接 2</a> <a hre 仁 "#'> 链 接 3</a> 
</nav> 


a 
0 


<h1>[ 文 章 标题 ]</h1l> 
</header> 


<p>[ 文 章 内 容 ]</p> 
<footer> 
<h2>[ 文 章 脚注 ]</h2> 
</footer> 
</article> 
</section> 
<aside> 
<h3>[ 辅 助 信息 ]</h3> 
</aside> 
<footer> 
<h2>[ 网 页 脚注 ]</h2> 
</footer> 
</main> 
整个 页 面包 括 两 部 分 : 标题 部 分 和 主要 内 容 部 分 。 标 题 部 分 又 包括 网 页 标题 、 次 级 标题 和 标题 提 
| 示 信 息 。 主 要 内 容 部 分 包括 3 部 分 : 文章 导航 、 辅 助 信息 、 网 页 脚注 。 文 章 块 包括 3 部 分 : 文章 标题 、 
文章 内 容 和 文章 脚注 。 
| (3) 在 模板 页 面 基 础 上 ， 开 始 细 化 本 示例 博客 首页 。 下 面 仅 给 出 本 例 首页 的 静态 页 面 结 构 ， 如 
果 用 户 需 要 后 台 动 态 生 成 内 容 ， 则 可 以 考虑 在 模板 结构 基础 上 另外 设计 。 把 testl.html 另存 为 
test2.html， 细 化 后 的 静态 首页 效果 如 图 3.7 所 示 。 


3 © |© localhost/iest/test2html 


我 的 小 树林 
禄 一 分 浮躁 , 守 一 分 宁 租 , 握 一 份 真 诚 携 一 份 善良 ， 做 个 简单 的 程序 员 。。。 


专注 于 HTML5、CSS3、JavaScript , 欢迎 各 位 道 友 前 来 论 道 


戏说 HTML5 


如 果 有 非 技术 人 员 问 你 ，HTML5 是 什么 ， 你 会 怎么 回答 ? 

新 的 HTML 规 范 。。。 

给 浏览 嚼 提供 了 温 大 的 能 力 ， 干 以 前 不 比 二 的 事 ，。。 和 切 地 说 应 该 是 给 浏览 人 规定 了 许多 新 的 接口 标准 ,要求 浏览 实现 强大 
功能 。。。 这 里 已 谢 红 术 一 叶 ] 


给 浏览 器 暴雪 了 许多 新 的 汉口 。。. 
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六 提示 : 限于 篇 幅 ， 本 节 没有 展示 完整 的 页 面 代码 ,读者 可 以 通过 本 节 示例 源 代码 了 解 完整 的 页 面 | 
结构 。 | 


(4) 设计 页 面 样式 部 分 代码 。 这 里 主要 使 用 了 CSS3 的 一 些 新 特性 ， 如 国 角 (borderradins) 和 。 
旋转 变换 等 , 通过 CSS 设计 的 页 面 显示 效果 如 图 3.8 所 示 。 相关 CSS3 技术 介绍 请 参阅 下 面 章节 内 容 。” 国 下 


Note 


晤 -分 沼 卫 , 守 - 介 宁静 ,里 - 众 下 也 ,其 - 切 再 咎 ,到 个 简单 的 各 诺 后 ，，. 


如 果 有 非 技 术 人 员 问 你 , HTML5 是 什么 ， 你 会 怎么 回答 ? 
新 的 HTML 规 范 。。 


绽 浏 览 器 握 供 了 强大 的 能 力 ， 干 以 前 不 能 二 的 事 ，，。 ( 确切 
， 她 说 应 
区 要 求 浏览 器 实现 强大 的 功 
。 这 里 感谢 红 可 一 叶 ) 


给 浏览 峰 暴 器 了 许多 新 的 接口 ，，。 

加 了 很 多 新 的 效果 。。 

人 回答 的 人 狐 似 明白 ， 但 又 好 
像 少 了 点 什么 强大 的 能 力 、 新 的 接口 六 融 的 效果 ,首先 回答 的 人 自己 


功 是 希 果 平平， 什么 是 HTML ， Bs 让 什么 是 
JavaScript , 大 部 分 的 前 迪 开 发 在 用 这 上 去 显 


图 3.8 博客 首页 的 页 面 完成 效果 | 
痊 提示 : 考虑 到 本 章 重点 学 习 HTML5 新 元 素 的 应 用 ， 所 以 本 节 示例 不 再 深入 讲解 CSS RR 
的 设计 过 程 ， 感 兴趣 的 读者 可 以 参考 本 节 示 例 源 代码 中 的 test3.html 文档 。 


(5) 对 于 早期 版 本 浏览 器 ， 或 者 不 支持 HTMLS5 的 浏览 器 ， 需 要 添加 一 个 CSS 样式 ， 因为 未知 
元 素 默认 为 行内 显示 (display:inline), 对 于 HTMLS5 结构 元 素来 说 , 我 们 需要 让 它们 默认 为 块 状 显示 。 
article, section, nav, aside, main, header, hgroup, footer { 
display: block; 


} 
(6) 一 些 浏览 器 不 允许 样式 化 不 支持 的 元 素 。 这 种 情形 出 现在 IE8 及 以 前 的 浏览 器 中 ， 因 此 还 
需要 使 用 下 面 JavaScript 脚本 进行 兼容 。 
<!--[fltIE 9]> 
<script> 
document.createElement("article"); 
document.createElement("section"); 
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的 同学 可 以 扫 码 练习 。 
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(7) 如 果 浏 览 器 禁用 了 脚本 ， 则 不 会 显示 ， 可 能 会 出 问题 。 因 为 这 些 元 素 定义 整个 页 面 的 结构 。 


为 了 预防 这 种 情况 ， 可 以 加 上 <noseript> 标 签 进行 提示 。 


<noscript> 
<hl> 和 警告 <hl> 
<p> 因 为 你 的 浏览 器 不 支持 HTML5， 一 些 元 素 是 模拟 使 用 JavaScript。 不 幸 的 是 ， 您 的 浏览 器 已 禁用 脚 


| 本。 请 启用 它 以 显示 此 页 。</fp> 


</noscript> 


3.5 HTML5 文档 大 纲 


HTMLS 对 如 何 处 理 位 于 article、aside、nav 和 section 等 元 素 中 的 hl 一 h6 有 一 套 算法 。 该 算法 通 


常 称 为 HTML5 文档 大 纲 。 不 过 ， 目 前 还 没有 浏览 器 实现 这 套 算法 ， 在 屏幕 阅读 器 中 只 有 JAWS (一 
| 款 运行 于 Windows 下 的 屏幕 阅读 器 ) 支持 ， 而 它 的 实现 还 存在 问题 。 鉴 于 此 ，W3C 已 经 将 文档 大 纲 
列 入 可 能 从 最 终 定稿 的 规范 中 移 除 的 特性 。 即 便 文 档 大 纲 最 终 留 在 规范 中 ， 或 者 浏览 ok 
| 器 将 其 实现 了 ， 我 们 还 是 可 以 按照 本 节 方 法 对 分 级 标题 进行 标记 。 这 种 方法 不 仅 适 用 
| 于 当前 环境 ， 还 足以 应 对 未 来 ， 因 为 文档 大 纲 不 会 对 页 面 造 成 破坏 。 感 兴趣 的 读者 可 


3.6 在 线 练 习 


本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HTML 结构 标签 设计 各 种 网 页 模块 。 感 兴趣 
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设计 HTML5 文本 


网 页 文本 内 容 丰富 ， 形 式 多 样 ， 通 过 不 同 的 版 式 显示 在 页 面 中 ， 为 用 户 提供 了 丰富 的 信 
息 。HTMLS 新 增 了 很 多 新 的 文本 标签 ， 它 们 都 有 特殊 的 语义 ， 正 确 使 用 这 些 标 签 ， 可 以 让 网 
页 文本 严谨 、 科 学 。 本 章 将 介绍 各 种 HTML5 文本 标签 的 使 用 , 帮助 读者 有 效 设 计 正 文 信息 。 


【 学 习 重 点 】 

段落 文本 

强调 文本 、 引 述 文本 、 引 用 或 参考 文本 
时 间 文 本 、 解 释 缩写 词 
术语 、 上 标 和 下 标 

联系 信息 、 标 注 文本 

标记 代码 、 预 格式 化 文本 

突出 显示 文本 


吾 豆 吾 豆 吾 吾 至 
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在 网 页 中 ， 通 用 文本 主要 包括 标题 和 正文 ， 下 面 分 别 进行 介绍 。 
4.1.1 标题 文本 


<hl>、<h2>、<h3>、<h4>、<hs5>、<h6> 标 签 可 以 定义 标题 文本 ， 按 级 别 高 低 从 大 到 小 分 别 为 hl、 
h2、h3、h4、h5、h6， 它 们 包含 的 信息 依据 重要 性 逐渐 递减 。 其 中 ，hl 表示 最 重要 的 信息 ， 而 h6 表 
| 示 最 次 要 的 信息 。 
| 【示例 】 下 面 示例 根据 文档 结构 层次 ， 定 义 了 不 同 级 别 的 标题 文本 。 
<div id="wrapper"> 
<hl> 网 页 标题 <h1> 
<div id="box2"> 
<h2> 栏 目标 题 </h2> 
<div id="sub boxl"> 
<h3> 子 栏目 标题 </h3> 
<p> 正 文 </p> 
</div> 
</div> 
</div> 


| hl、h2 和 3 比较 常用 ，h4、h5 和 h6 不 是 很 常用 ， 除 非 在 结构 层级 比较 深 的 文档 中 才 会 考虑 选 
| 用， 因为 一 般 文档 的 标题 层次 在 三 级 左右 。 对 于 标题 元 素 的 位 置 ， 应 该 出 现在 正文 内 容 的 顶部 ， 一 般 处 
| 于 容器 的 第 1 行 。 


4.1.2 段落 文本 


| 在 网 页 中 输入 段落 文本 ， 应 该 使 用 p 元 素 ， 它 是 最 常用 的 HTML 元 素 之 一 。 在 默认 情况 下 ， 浏 
| 览 器 会 在 标题 和 段落 之 间 ， 以 及 不 同 的 段落 之 间 添 加 垂直 间距 。 
| 【示例 】 下 面 正文 使 用 p 元 素 设 计 了 两 段 诗句 。 
<article> 
<hl> 枫 桥 夜 泊 </h1> 
<h2> 唐 代 : 张 继 </h2> 
<p> 月 落 乌 啼 霜 满 天 ， 江 机 渔 火 对 愁 眠 。</p> 


<p> 姑 苏 城 外 寒山 地， 夜半 钟 声 到 客船 。</p> 
</article> 


| 可 以 为 段落 添加 样式 ， 包 括 字 体 、 字 号 、 颜 色 等 ， 也 可 以 通过 CSS 改变 段落 文本 的 对 齐 方 式 ， 
”包括 左 对 齐 、 右 对 齐 和 居中 对 齐 。 


42 描述 文本 


HTMLS 淡化 了 标签 的 修饰 功能 ， 强 调 其 固有 的 语义 性 ， 极 个 别 的 过 时 的 、 纯 样式 标签 不 建议 再 
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使 用 ， 如 <font>、<center>、<s>、<strike>。 


4.2.1 强调 文本 


strong 元 素 表 示 内 容 的 重要 性 ， 而 em 则 表示 内 容 的 着 重点 。 根 据 内 容 需 要 ， 这 两 个 元 素 既 可 以 到 站 
单独 使 用 ， 也 可 以 一 起 使 用 。 | 
【示例 1】 在 下 面 代码 中 既 有 strong， 又 有 em。 浏 览 器 通常 将 strong 文本 以 粗 体 显示 ， 而 将 em 
文本 以 斜体 显示 。 如 果 em 是 strong 的 子 元 素 ， 将 同时 以 斜体 和 粗 体 显示 文本 。 
<p><strong> 警 告 : 不 要 接近 展品 <em> 在 任何 情况 下 </em></strong></p> 
不 要 使 用 b 元 素 代替 strong,， 也 不 要 使 用 i 元 素 代 蔡 em。 尽 管 它们 在 浏览 器 中 显示 的 样式 是 一 样 
的 ， 但 它们 的 含义 却 很 不 一 样 。 
em 在 句子 中 的 位 置 会 影响 句子 的 含义 。 例 如 ,“<p><em> 你 </em> 看 着 我 <p>” 和 “<p> 你 看 着 
<em> 我 </em></p>” 表 达 的 意思 是 不 一 样 的 。 
【示例 2】 可 以 在 标记 为 strong 的 短语 中 再 嵌 套 strong 文本 。 如 果 这 样 做 ， 作 为 另 一 个 strong 
的 子 元 素 的 strong 文本 的 重要 程度 会 递增 。 这 种 规则 对 嵌 套 在 另 一 个 em 内 的 em 文本 也 适用 。 
<p><strong> 记 住 密码 是 <strong>111222333</strong></strong></p> 


其 中 111222333 文本 要 比 其 他 strong 文本 更 为 重要 。 
可 以 用 CSS 将 任何 文本 变 为 粗 体 或 斜体 ， 也 可 以 覆盖 strong 和 em 等 元 素 的 浏览 器 默认 显示 样式 。 


< 注意 ;在 旧版 本 的 HTML 中 ，strong 所 表示 文本 的 强调 程度 比 em 表示 的 文本 要 高 。 不 过 ， 在 
HTML5 中 ，em 是 表示 强调 的 唯一 元 素 ， 而 strong 表示 的 则 是 重要 程度 。 


4.2.2 ”标记 细则 


HTMLS 使 用 small 元 素 表 示 细 则 一 类 的 旁 注 ， 例 如 ， 免 责 声明 、 注 意 事项 、 法 律 限制 、 版 权 信 
息 等 。 有 了 时 我 们 还 可 以 用 它 来 表示 署名 ， 或 者 满足 许可 要 求 。 
【示例 1】small 通常 是 行内 文本 中 的 一 小 块 ， 而 不 是 包含 多 个 段落 或 其 他 元 素 的 大 块 文本 。 
<dl> 
<dt> 单 人 间 </dt> 
<dd>399 元 <small> 含 早餐 ， 不 含 税 </small></dd> 
<dt> 双 人 间 </de> 
<dd>599 元 <small> 含 早餐 ， 不 含 税 </small></dd> 
</d> 


一 些 浏览 器 会 将 small 包含 的 文本 显示 为 小 字号 。 不 过 ， 一 定 要 在 符合 内 容 语义 的 情况 下 使 用 该 

元 素 ， 而 不 是 为 了 减 小 字号 而 使 用 。 
【示例 2】 在 下 面 示例 中 , 第 一 个 small 元 素 表 示 简 短 的 提示 声明 , 第 二 个 small 元 素 表示 包含 在 

页 面 级 footer 里 的 版 权 声 明 ， 这 是 一 种 常见 的 用 法 。 

<p> 现 在 订购 免费 送 货 。<small>( 仅 限于 五 环 以 内 ) </small></p> 

<footer role="contentinfo"> 

<p><small>&copy; 2018 Baidu 使 用 百度 前 必 读 </small></p> 
</footer> 
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| small 只 适用 于 短语 ， 因 此 不 要 用 它 标记 长 的 法 律 声 明 ， 如 “使 用 条 款 ” 和 “隐私 政策 ”页 面 。 
| 根据 需要 ， 应 该 用 段落 或 其 他 语义 标签 标记 这 些 内 容 。 


人 ” 寥 提示 : HTMLS 还 支持 big 元素, 用 来 定义 大 号 字体 <big> 标 签 包含 的 文字 字体 比 周围 的 文字 要 
会 ”| 大 一 号 ， 如 果 文 字 已 经 是 最 大 号 字体 ， 则 <big> 标 签 将 不 起 任何 作用 。 用 户 可 以 谈 套 使 用 
| <big> 标 签 逐 步 放大 文本 ， 每 一 个 <big> 标 签 都 可 以 使 字体 大 一 号 ， 直 到 上 限 7 号 文本 。 


4.2.3 ”特殊 格式 


b 和 i 是 HTML4 遗弃 的 两 个 元 素 , 分 别 表示 粗 体 和 和 斜体 , HTML5 重新 启用 这 两 个 元 素 ， 作 为 其 

| 他 语义 元 素 都 不 适应 的 场景 ， 即 作为 最 后 备 选项 使 用 。 

| 回 b: 表示 出 于 实用 目的 提醒 注意 的 文字 ， 不 传达 任何 额外 的 重要 性 ， 也 不 表示 其 他 的 语 态 和 
语气 ， 用 于 如 文档 摘要 里 的 关键 词 、 评 论 中 的 产品 名 、 基 于 文本 的 交互 式 软件 中 指示 操作 的 
文字 、 文 章 导 语 等 。 

加 ”i: 表示 不 同 于 其 他 文字 的 文字 ， 具 有 不 同 的 语 态 或 语气 ， 或 其 他 不 同 于 常规 之 处 ， 用 于 如 
分 类 名 称 、 技 术 术 语 、 外 语 里 的 惯用 词 、 翻 译 的 散文 、 西 方 文字 中 的 船舶 名 称 等 。 

【示例 】 下 面 示例 简单 演示 了 b 和 1 应 用 场景 。 

<p> 这 是 一 个 <b> 红 <Jb> 盒 子 ， 那 是 一 个 <b> 蓝 <jb> 盒 子 <Jp> 

<p> 这 块 <i class="taxonomy"> 玛 瑙 < 人 > 来自 西 亚 </p> 

<p> 这 篇 <i> 散 文 </ 记 已 经 发 表 .</p> 

<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air</p> 


| 文本 默认 显示 为 粗 体 ，i 文本 默认 显示 为 斜体 ， 可 以 使 用 CSS 重 置 它们 的 样式 。 

， 次 提示 ; b 和 ji 不 包含 任何 明显 的 语义 ， 但 浏览 者 能 够 区 分 它们 与 周围 的 文字 。 在 传统 印刷 中 某 些 

| 排版 规则 在 现 有 的 HIML 语义 中 还 没有 对 应 的 语义 标签 。 例 如 ， 以 斜体 表示 植物 学 名 、 
具体 的 交通 工具 名 称 及 外 来 语 。 这些 词语 不 是 为 了 强调 而 加 上 儿 休 的， 只 是 排版 惯例 为 
此 ，HTMLS 启用 了 早 被 废弃 的 b 和 i。 


4.2.4 定义 上 标 和 下 标 


| 在 传统 印刷 中 ， 上 标 和 下 标 是 很 重要 的 排版 格式 。HTML5 使 用 sup 和 sub 来 定义 上 标 文本 和 下 
| 标 文本 。 上 标 和 下 标 文本 比 主体 文本 稍 高 或 稍 低 。 常 见 的 上 标 包括 商标 符号 、 指 数 和 脚注 编号 等 ; 常 
| 见 的 下 标 包括 化 学 符号 等。 
| 【示例 1】sup 元 素 的 一 种 用 法 就 是 表示 脚注 编号 。 根 据 从 属 关系 ， 将 脚注 放 在 article 的 footer 
”里 ， 而 不 是 整个 页 面 的 footer 里 。 
| <article> 
<hl> 王 维 </h1> 

| <p> 王 维 参禅 悟 理 ， 学 庄 信道 ， 精 通 诗 、 书 、 画 、 音 乐 等 ， 以 诗 名 盛 于 开元 、 天 宝 间 ， 尤 长 五 言 ， 多 咏 山 
| 水 田园 ， 与 孟浩然 合 称 “ 王 重 ”， 有 “ 诗 佛 ”之 称 <a hre 人 "#footnote-l" tile=" 参 考 注释 "><sup>[1]</sup></a> 。</p> 
| <footer> 

<h2> 参 考 资料 </h2> 

<p id="footnote-1"><sup>[1]</sup> 孙 昌 武 《佛教 与 中 国文 学 》 第 二 章 :“ 王 维 的 诗歌 受 佛教 影响 是 
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很 显著 的 。 因 此 早 在 生前 ， 就 得 到 “当代 诗 折 ， 又 精 禅 理 ”的 赞誉 。 后 来 ， 更 得 到 “ 诗 佛 ” 的 称号 。”</p> 
</footer> 
</article> 


为 文章 中 每 个 脚注 编号 创建 了 链接 ， 指 向 footer 内 对 应 的 脚注 ， 从 而 让 访问 者 更 容易 找到 它们 。 全 
同时 ， 注 意 链接 中 的 title 属性 也 提供 了 一 些 提示 。 ES 

上 标 是 对 某 些 外 语 缩写 词 进行 格式 化 的 理想 方式 ， 例 如 ， 法 语 中 用 Mlle 表示 Mademoiselle〔 小 、 国 WN[172 
姐 )， 西 班 牙 语 中 用 3a 表示 tercera (第 三 )。 此 外 ， 一 些 数字 形式 也 要 用 到 上 标 ， 如 2nd、5t 了 h。 下 标 | 


适用 于 化 学 分 子 式 ， 如 HO。 | 


痊 提示 : sub 和 sup 元 素 会 轻微 地 增 大 行 高 。 不 过 使 用 CSS 可 以 修复 这 个 问题 ， 修 复 样式 代码 如 下 。 
<style type="text/css"> 
sub, sup { 
font-size: 75%:; 
line-height: 0; 
position: relative; 
vertical-align: baseline; 
} 
sup { top: -0.5em; } | 
sub { bottom: -0.25em; } | 
</style> | 


户 还 可 以 根据 内 容 的 字号 对 这 个 CSS 做 一 些 调整 ， 使 各 行 行 高 保持 一 致 。 | 
【示例 2】 对 于 下 面 这 个 数学 解 题 演示 的 段落 文本 ， 使 用 格式 化 语义 结构 能 够 很 好 地 解决 数学 公 | 
式 中 各 种 特殊 格式 的 要 求 。 对 于 机 器 来 说 ， 也 能 够 很 好 地 理解 它们 的 用 途 ， 效 果 如 图 4.1 所 示 。 


<div id="maths"> 
<hl> 解 一 元 二 次 方程 <hl> 
<p> 一 元 二 次 方程 求解 有 四 种 方法 : </p> 
<u> 
<li> 直 接 开 平方 法 </li> 
<li> 配 方法 <4i> 
<1i> 公 式 法 <Ai> 
<li> 分 解 因 式 法 <i> 
</u> 
<p> 例 如 ， 针 对 下 面 这 个 一 元 二 次 方程 : </p> 
<p><i>x</i><sup>2</sup>-<b>5</b><>x</P+<b>4</b>=0</p> | 
<p> 我 们 使 用 <big><b> 分 解 因 式 法 <b></big> 来 演示 解 题 思路 如 下 : </p> 
<p><small> 由 : </small>(<i>x</>-D)(<i>x</>-4)=0</p> | 
<p><smal> 得 : </small><br /> 
<i>x</><sub>1</sub>=1<br > 
<i>x</i><sub>2</sub>=4</p> | 


</div> 


在 上 面 代码 中 ， 使 用 i 元 素 定义 变量 x 以 斜体 显示 ; 使 用 sup 元 素 定义 二 元 一 次 方程 中 二 次 方 ; 
使 用 b 元 素 加 粗 显示 常量 值 ; 使 用 big 元 素 和 b 元 素 加 大 加 粗 显示 “分 解 因 式 法 ”这 个 短语 ; 使 用 small | 
元 素 缩写 操作 谓词 “由 ”和 “得 ”的 字体 大 小 ; 使 用 sub 元 素 定义 方程 的 两 个 解 的 下 标 。 


| 
人 
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国 曾 spacjsc 
解 一 元 二 次 方程 
一 元 -次 方 各 水 有 四 种 方法 

二 接 开 下方 法 

-配方 法 


,公元 法 
“和 基因 K 法 


例如 ， 针 对 下 面 这 个 一 元 二 次 方程 
St4-0 


我 们 使 月 分解 因 式 法 不 演示 解 是 思路 如 下 ， 


| 图 4.1 格式 化 文本 的 语义 结构 效果 
4.2.5 定义 术语 


| 

| 在 HTML 中 定义 术语 时 ， 可 以 使 用 dfn 元 素 对 其 做 语义 上 的 区 分 ， 例 如 : 

| 

| <p><dfn id="def-internet">Intermet</dfn> 是 一 个 全 球 互联 网 络 系统 ， 使 用 因特网 协议 套件 (TCP/IP〉 为 全 球 
| 数 十 亿 用 户 提供 服务 。</p> 

| 通常 ，dfn 元 素 默认 以 斜体 显示 。 由 dfn 标记 的 术语 与 其 定义 的 距离 远近 相当 重要 。 如 HTML5 
| 规范 所 述 :“ 如 果 一 个 段落 、 描 述 列 表 或 区 块 是 距 某 df 元 素 最 近 的 祖先 ， 那 么 该 段落 、 描 述 列表 或 
区 块 必 须 包含 该 术语 的 定义 。” 简 而 言 之 ，dfn 元 素 及 其 定义 必须 挨 在 一 起 ， 和 否则 便 是 错误 的 用 法 。 

| 【示例 】 还 可 以 在 描述 列表 〈dl 元 素 ) 中 使 用 dfn。 


| <p><dfn id="def-internet">Intemet</dfn> 是 一 个 全 球 互联 网 络 系统 ， 使 用 因特网 协议 套件 (TCP/IP)〉 为 全 球 
， 数 十 亿 用 户 提供 服务 。</p> 
| <dl> 


<!-- 定义 “万 维 网 ”和 “因特网 ”的 参考 定义 ”--> 
<dt> <dfn> <abbr title="World-Wide Web">WWW</abbr> </dfn> </dt> 
<dd> 万 维 网 (WWW) 是 一 个 互 连 的 超 文本 文档 访问 系统 ， 它 建立 在 <a href="#def-internet">Internet</a> 


| BE 

| </d> 

| 仅 在 定义 术语 时 使 用 dtn， 而 不 能 为 了 让 文字 以 斜体 显示 就 使 用 该 元 素 。 使 用 CSS 可 以 将 任何 文 
| 字 变 为 斜体 。 


dfn 可 以 在 适当 的 情况 下 包 住 其 他 的 短语 元 素 ， 如 abbr， 例 如 : 

<p><dfn><abbr title="Junior'> 工 </abbr></dfn> 他 儿子 的 名 字 和 他 父亲 的 名 字 一 样 吗 ? </p> 
| 如 果 在 dfn 中 添加 可 选 的 title 属性 ,其 值 应 与 dfn 术语 一 致 .如 果 只 在 dfh 里 嵌 套 一 个 单独 的 abbr， 
”dfh 本 身 没有 文本 ， 那 么 可 选 的 title 只 能 出 现在 abbr 里 。 
4.2.6 标记 代码 


使 用 code 元 素 可 以 标记 代码 或 文件 名 。 如 果 代码 中 包含 “<” 或 “>” 字 符 ， 应 使 用 “&lt ”和 
“&gt” 表 示 。 如 果 直 接 使 用 “<” 或 “>” 字 符 ， 将 被 视 为 HTML 源 代码 处 理 。 
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【示例 】 本 例 使 用 code 显示 一 块 代码 , 为 了 格式 化 显示 , 这 里 同时 使 用 pre 元 素 包 囊 code 文本 。 | 


| 
<pre> | 
| 
| 
| 


<code> 


code{ | 1 
margin:2em; | 天 给 
} 1 
</code> YA Lo 
</pre> 
疱 提示 : 除了 code 外 ， 其 他 与 计算 机 相关 的 元 素 简 要 说 明 如 下 。 
回 kbd: 户 输入 指示 ， 例 如 : 
<o> 
<l 记 使 用 <kbd>TAB</kbd> 键 ， 切 换 到 提交 按钮 </li> 
< 这 点 按 <kbd>RETURN</kbd> 或 <kbd>ENTER</kbd> 键 </li> 
</ol> 


与 code 一 样 ，kbd 默认 以 等 宽 字体 显示 。 
回 samp: 程序 或 系统 的 示例 输出 ， 例 如 : 
<p> 一 旦 在 浏览 器 中 预览 ， 则 显示 <samp>Hello,World</samp></p> 


samp 默认 以 等 宽 字体 显示 。 

回 var: 变量 或 占 位 符 的 值 ， 例 如 : 

<p> 爱 因 斯 坦 称 为 是 最 好 的 <var>E</var>=<var>m</var><var>c</var><sup>2</sup>.</p> | 
也 可 以 作为 占 位 符 的 值 ,例如 , 在 填词 游戏 的 答题 纸 上 可 以 这 样 定义 : <var>adjective</var>， 


<Var>Vverb</var>。 
var 默认 以 斜体 显示 。 


< 人 注意 : 可 以 在 HTMLS 页 面 中 使 用 math 等 MathML 元 素 表示 高 级 的 数学 相关 的 标记 。 


4.2.7 ”预定 义 格式 


预定 义 文本 就 是 可 以 保持 文本 固有 的 换行 和 空格 。 使 用 pre 元 素 可 以 定义 预定 义 文本 。 
【示例 】 下 面 使 用 pre 显示 CSS 样式 代码 ， 显 示 效 果 如 图 4.2 所 示 。 


<pre> 
pre{ 
margin: 20px auto; 
padding: 20px:; 
background-color: #aea8a8; 此 根据 自己 需要 修改 背景 底 色 颜 色 */ 
white-space: pre-wrap; | 
word-wrap: break-word; | 
letter-spacing: 0; | 
font: 14px/26px 'courier new'; | 
position: relative; | 
border-radius: 4px: | 


} 
</pre> 人 
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ETEE 用 


图 4.2 定制 pre 预定 义 格式 效果 
| 预定 义 文本 默认 以 等 宽 字体 显示 ， 可 以 使 用 CSS 改变 字体 样式 。 如 果 要 显示 包含 HTML 元 素 的 
| 内 容 ， 应 将 包围 元 素 名 称 的 “<” 和 “>” 分 别 改 为 其 对 应 的 字符 实体 “&lt” 和 “&gt”。 

pre 默认 为 块 显示 ， 即 从 新 一 行 开始 显示 ， 浏 览 器 通常 会 对 pre 文本 关闭 自动 换行 ， 因 此 ， 如 果 
包含 很 长 的 单词 ， 就 会 影响 页 面 的 布局 , 或 产生 横向 滚动 条 。 使 用 下 面 CSS 样式 可 以 对 pre 包含 内 容 
| 打开 自动 换行 。 
Pre { white-space: pre-wrap;} 
”A 注意 : 不 要 使 用 CSS 的 white-space: pre 代替 pre 的 效果 ， 这 样 会 破坏 预定 义 格式 文本 的 语义 性 。 


4.2.8 ”定义 缩写 词 


使 用 abbr 元 素 可 以 标记 缩写 词 并 解释 其 含义 ， 还 可 以 使 用 abbr 的 tile 属性 提供 缩写 词 的 全 称 。 
| 提示， 也 可 以 将 全 称 放 在 缩写 词 后 面 的 括号 里 ， 或 混用 这 两 种 方式 。 如 果 使 用 复数 形式 的 缩写 词 ， 全 
， 称 也 要 使 用 复数 形式 。 
| 【示例 】 部 分 浏览 器 对 于 设置 了 title 的 abbr 文本 会 显示 为 下 画 虚线 样式 ， 如 果 看 不 到 ， 可 以 为 
| abbr 的 包含 框 添加 line-height 样式 。 本 例 使 用 CSS 主要 设计 下 画 虚 线 样式 ， 以 便 兼容 所 有 浏览 器 。 
| a 

abbr[title] { border-bottom: 1px dotted #000; } 

</style> 

<p><abbr title=" HyperText Markup Language">HTML</abbr> 是 一 门 标识 语言 。</p> 

当 访问 者 将 鼠标 移 至 abbr 上 ， 浏 览 器 都 会 以 提示 框 的 形式 显示 title 文本 ， 类 似 于 a 的 title。 
| abbr 使 用 场景 : 仅 在 缩写 词 第 一 次 在 视图 中 出 现时 使 用 。 使 用 括号 提供 缩写 词 的 全 称 是 解释 缩写 
| 词 最 直接 的 方式 ， 能 够 让 访问 者 更 直观 地 看 到 这 些 内容 。 例 如 ， 使 用 智能 手机 和 平板 电脑 等 触摸 屏 设 
| 备 的 用 户 可 能 无 法 移 到 abbr 元 素 上 查看 title 的 提示 框 。 因 此 ， 如 果 要 提供 缩写 词 的 全 称 ， 应 该 尽量 
将 它 放 在 括号 里 。 


次 提示 : 在 HTML5 之 前 有 acronym ( 首 字母 缩写 词 ) 元 素 ， 但 设计 和 开发 人 员 常 常 分 不 清楚 缩 
写 词 和 首 字母 缩写 词 ， 因 此 HTMLS 废除 了 acronym 元 素 ， 让 abbr 适用 于 所 有 的 场合 。 
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4.2.9 标注 编辑 或 不 用 文本 


HTMLS 使 用 下 面 两 个 元 素来 标记 内 容 编辑 的 操作 。 
ins: 已 添加 的 内 容 。 
del: 已 删除 的 内 容 。 
这 两 个 元 素 可 以 单独 使 用 ， 也 可 以 搭配 使 用 。 | 
【示例 1】 在 下 面 列表 中 ， 上 一 次 发 布 之 后 ， 又 增加 了 一 个 条 目 ， 同 时 根据 del 元 素 的 标注 , 移 | 
除了 一 些 条 目 。 使 用 ins 时 不 一 定 要 使 用 del, 反之 亦 然 。 浏览 器 通常 会 让 它们 看 起 来 与 普通 文本 不 一 
样 。 同 时 ，s 元 素 用 以 标注 不 再 准确 或 不 再 相关 的 内 容 (一 般 不 用 于 标注 编辑 内 容 )。 | 
<ul> 
<li><del> 删 除 项 目 </del></li> | 
<l 记 列表 项 目 </li> | 
<li><del> 删 除 项 目 </del></li> | 
<li><ins> 插 入 项 目 </ins></li> | 
<hl> | 
浏览 器 通常 对 已 删除 的 文本 加 上 删除 线 ， 对 插入 的 文本 加 上 下 画 线 ， 可 以 用 CSS 修改 这 些 样式 。 | 
【示例 2】del 和 ins 是 少 有 的 既 可 以 包围 短语 内 容 〈 行 内 元 素 )， 又 可 以 包围 块 级 内 容 的 元 素 。 


<ins> | 
<p> 文 本 1</p> | 
</ins> | 
<del> | 
<u> | 
<li><de> 删 除 项 目 </del></li> | 
<li> 列 表 项 目 <Ai> | 
<li><de 记 删除 项 目 </del></li> | 
<li><ins> 插 入 项 目 </ins></li> | 

</ul> | 
</del> | 


del 和 ins 都 支持 两 个 属性 : cite 和 datetime。cite 属性 (区 别 于 cite 元 素 ) 用 于 提供 一 
指向 说 明 编 辑 原因 的 页 面 。 
【示例 3】 下 面 示例 演示 了 两 个 元 素 的 显示 效果 ， 如 图 4.3 所 示 。 | 
<p> <cite> 因为 和 懂得， 所 以 慈悲 <cite>。 <ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html" | 
datetime="2018-8-1"> 这 是 张爱玲 对 胡 兰 成 说 的 话 </ins>。</p> | 
<p> <cite> 笑 ， 全 世界 便 与 你 同 笑 : 殿 ， 你 便 独 自 哑 </cite> 。<del datetime="2018-8-8"> 出 自 冰心 的 《 遥 寄 印 | 
度 哲 人 泰 世 尔 》<Jdel>，<ins cite="http://news.sanwen$.cn/a/2014-07-13/9518 .html" datetime="2018-8-1'> 出 自 张 爱 | 
玲 的 小 说 《 花 凋 》</ins> </p> 


© ET Er 发 
因为 世 稳 ， 记 以 侠 慕 。 这 星 张爱玲 对 胡 兰 成 说 的 话 。 | 


熔 ， 会 种蛋 信 与 便 司 关 : 天 ， 价 仿效 局 完 。 出 自生 心 的 《这 夺 印度 哲人 
素 共 尔 》， 出自 张爱玲 的 小 说 《 花 翌 》 


图 43 插入 和 删除 信息 的 语义 结构 效果 | 
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| datetime 属性 提供 编辑 的 时 间 。 浏 览 器 不 会 将 这 两 个 属性 的 值 显示 出 来 ， 因 此 它们 的 使 用 并 不 广 
| 泛 。 不 过 ， 应 该 尽量 包含 它们 ， 从 而 为 内 容 提供 一 些 背景 信息 。 它 们 的 值 可 以 通过 JavaScript 或 分 析 
， 页面 的 程序 提取 出 来 。 
国内 ”二 提示 HTMLS 指出 : s 元 素 不 适用 于 指示 文档 的 编辑 ， 要 标记 文档 中 一 块 已 移 除 的 文本 ， 应 使 
i 用 del 元 素 。 有 时 ， 这 之 间 的 差异 是 很 微妙 的 ， 只 能 由 个 人 决定 哪 种 选择 更 符合 内 容 的 语 
义 。 仅 在 有 语义 价值 时 使 用 del、ins 和 s。 如 果 只 是 出 于 装饰 的 原因 要 给 文字 添加 下 画 线 
或 删除 线 ， 可 以 用 CSS 实现 这 些 效果 。 


4.2.10 指明 引用 或 参考 


| 使 用 cite 元 素 可 以 标识 引用 或 参考 的 对 象 ， 如 图 书 、 歌 曲 、 电 影 、 演 唱 会 或 音乐 会 、 规 范 、 报 纸 
| 或 法 律 文件 等 名 称 。 

| 【示例 】 在 下 面 示例 中 ， 使 用 cite 元 素 标记 图 书 名 称 。 

| <p> 他 正在 看 <cite> 红 楼 梦 </cite></p> 

全 注 意 ; 要 引述 源 中 内 容 ， 应 该 使 用 blockquote 或 q 元 素 ，cite 只 用 于 参考 源 本 身 ， 而 不 是 源 的 内 容 ， 
| HTML4 允许 使 用 cite 引用 人 名 , HTMLS 不 再 建议 使 用 。 例如， 很 多 网 站 常用 cite 在 博客 或 文章 
| 中 引用 作者 或 评论 者 的 名 字 。 

”<p><cite> 备 迅 Jeite> 说 过 :<q> 地 上 本 没有 路 ， 走 的 人 多 了 就 成 了 路 。<Jq></p> 


4.2.11 引述 文本 


| blockquote 元 素 表示 单独 存在 的 引述 (通常 很 长 )， 它 默认 显示 在 新 的 一 行 。 而 q 元 素 则 用 于 短 
| 的 引述 ， 如 句子 里 面 的 引述 ， 例 如 : 
| < 毛泽东 说 过 : 
<blockquote> 帝 国 主义 都 是 纸老虎 … </blockquote> 
</p> 

| <p> 世 界 自然 基金 会 的 目标 是 : <q cite="http://www.wwf.org"> 建设 一 个 与 自然 和 谐 相处 的 未 来 </q> 我 们 希 
| 望 他 们 成 功 。</p> 
| 如 果 要 添加 署名 ， 署 名 应 该 放 在 blockquote 外 面 。 可 以 把 署名 放 在 p 里 面 ， 不 过 使 用 figure 和 
”figcaption 可 以 更 好 地 将 引述 文本 与 其 来 源 关联 起 来 。 如 果 blockquote 中 仅 包 含 一 个 单独 的 段落 或 短 
| 语 ， 可 以 不 必 将 其 包 在 p 中 再 放 入 blockquote。 
| 浏览 器 应 对 q 元 素 中 的 文本 自动 加 上 特定 语言 的 引号 ， 对 blockquote 文本 进行 缩 进 ，cite 属性 的 
| 值 则 不 会 显示 出 来 。 不 过 ， 所 有 的 浏览 器 都 支持 cite 元 素 ， 通 常 对 其 中 的 文本 以 斜体 显示 。 
| 【示例 】 下 面 这 个 结构 综合 展示 了 cite、q 和 blockquote 元 素 以 及 cite 引文 属性 的 用 法 ， 演 示 效 
| 果 如 图 4.4 所 示 。 
| <div id="article"> 

<hl> 智 慧 到 底 是 什么 呢 ? </hl> 


<h2>《 卖 拐 》 智 慧 摘录 </h2> 
<blockquote cite="http://www.szbf.net/Article_ Show.asp?ArticleID=1249"> 
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<p> 有 人 把 它 说 成 是 知识 ， 以 为 知识 越 多 ， 就 越 有 智慧 。 我 们 今天 无 时 无 处 不 在 受到 信息 的 包围 和 
信息 的 龙 炸 ， 似 乎 所 有 的 信息 都 是 真理 ， 仿 佛 离开 了 这 些 信 息 ， 就 不 能 生存 下 去 了 。 但 是 你 掌握 的 信息 越 多 ， 只 
能 说 明 你 知识 的 丰富 ， 并 不 等 于 你 掌握 了 智慧 。 有 的 人 ， 知 识 丰富 ， 智 慧 不 足 ， 难 有 大 用 ; 有 的 人 ， 知 识 不 多 ， 
但 却 无 所 不 能 ， 成 为 奇才 。</p> 

</blockquote> 
<p> 下 面 让 我 们 看 看 <cite> 大 忽悠 </cite> 赵 本 山 的 这 段 台词 ， 从 中 可 以 体会 到 语言 的 智慧 。</p> 
<div id="dialog"> 

<p> 赵 本 山 : <q> 对 头 ， 就 是 你 的 腿 有 病 ， 一 条 腿 短 ! </q></p> 

<p> 范 ” 伟 : <q> 没 那个 事 儿 ! 我 要 一 条 腿 长 ， 一 条 腿 短 的 话 ， 那 卖 裤子 人 就 告诉 我 了 ! </q> </p> 

<p> 赵 本 山 : <q> 卖 裤子 的 告诉 你 你 还 买 裤子 么 ， 谁 像 我 心眼 这 么 好 哇 ? 这 老 余 ， 我 给 你 调调 。 信 
不 信 ， 你 的 腿 随 着 我 的 手 往 高 抬 ， 能 抬 多 高 抬 多 高 ， 往 下 使 劲 落 ， 好 不 好 ? 信 不 信 ? 腿 指定 有 病 ， 右 腿 短 ! 来 ， 
起 来 ! </q> </p> 

<p class="action"> ( 范 伟 配合 做 动作 ) </p> 

<p> 赵 本 山 : <q> 停 ! 麻 没 ? </q> </p> 

<p> 范 伟 : <q> 麻 了 </q> </p> 

<p> 高 秀敏 : <q> 哎 ， 他 咋 麻 了 昵 ? </q> </p> 

<p> 赵 本 山 :， <q> 你 踪 ， 你 也 麻 ! </q> </p> 

</div> 
</div> 


智慧 到 底 是 什么 呢 ? 


《 夹 毛 》 智 慧 摘录 


有 人 把 它 说 a RR, 村， 就 越 有 智 林 我 们 3 天 天 无 时 天 无 杀人 
的 信息 都 是 真理 ， 开 了 这 ! 就 不 能 生存 下 : 但 是 你 党 
Ei br 知识 在 富 ， 智 建 不 足 ， 对 人， 站 

下 面 让 我 们 看 看 天 地 多 区 本山 的 这 咎 台词 ， 从 中 可 以 体会 到 语言 的 智慧 


赵本山:“ 寺 头 ， 就 是 你 的 妥 有 病 ， 一 条 肋 短 ! “ 


范 伟 ，“ 没 那个 事 儿 ! 我 要 一 条 腿 长 ， 一 条 屠 短 的 话 ， 那 卖 裤子 人 就 告诉 线 了 1 ” 


赵本山 ,“ 卖 裤子 的 告诉 你 你 还 买 袜子 么 ， 谁 像 我 心眼 这 么 好 哇 ? 六 人 信 不 信 ， 份 的 腿 随 着 我 的 手 往 高 抬 ， 能 
抬 多 高 抬 多 高 ， 往 下 使 劲 落 ， 好 不 好 ? 信 不 信 ? 腿 指定 有 病 ， 右 腿 短 ! 来 ， 起 来 


【 范 伟 配 言 做 动作 ) 

起 本 山 :“ 停 | 麻 没 ?” 
范 伟 , “ 麻 了 7” 

高 秀敏 ，" 哎 ， 他 咋 麻 了 呢 ?” 
赵本山 ，“ 你 踪 ， 你 也 麻 | “ 


图 4.4 引用 信息 的 语义 结构 效果 


1 提示 : blockquote 和 q 都 有 一 个 可 选 的 cite 属性 ， 提 供 引述 内 容 来 源 的 URL。 该 属性 对 搜索 引 
或 其 他 收集 引述 文本 及 其 引用 的 脚本 来 说 是 有 用 的 。 默 认 cite 属性 值 不 会 显示 出 来 ， 如 果 
要 让 访问 者 看 到 这 个 URL， 可 以 在 内 容 中 使 用 链接 (a) 重复 这 个 URL。 也 可 以 使 用 
JavaScript 将 cite 的 值 暴露 出 来 ， 但 这 样 做 的 效果 稍 差 一 些 。 
blockquote 和 q 元 素 可 以 谋 套 。 赃 套 的 q 元 素 应 该 自动 加 上 正确 的 引号 。 由 于 内 外 引 号 在 
不 同 语言 中 的 处 理 方式 不 一 样 ， 因 此 要 根据 需要 在 q 元 素 中 加 上 lang 属性 ， 不 过 浏览 器 
对 嵌 套 q 元 素 的 支持 程度 并 不 相同 ， 其 实 浏 览 器 对 非 嵌 套 q 元 素 的 支持 也 不 同 。 
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[各 > 


4.2.12 换行 显示 


使 用 br 元 素 可 以 实现 文本 换行 显示 。 要 确保 使 用 br 是 最 后 的 选择 ， 因 为 该 元 素 将 表现 样式 带 入 


了 HTML， 而 不 是 让 所 有 的 呈现 样式 都 交 由 CSS 控制 。 例 如 ， 不 要 使 用 br 模拟 段落 之 间 的 距离 。 相 
， 反 ， 应 该 用 p 标记 两 个 段落 并 通过 CSS 的 margin 属性 规定 两 段 之 间 的 距离 。 


【示例 】 对 于 诗歌 、 街 道 地 址 等 应 该 紧 挨 着 出 现 的 短 行 ， 都 适合 用 br 元 素 。 


<p> 北 京 市 <br /> 
海淀 区 <br 记 
北京 大 学 <br /> 
32 号 楼 </p> 


每 个 br 元 素 强制 让 接 下 来 的 内 容 在 新 的 一 行 显示 。 如 果 没有 br 元 素 ， 整 个 地 址 都 会 显示 在 同一 


| 行 。 可 以 使 用 CSS 控制 段落 中 的 行 间距 以 及 段落 之 间 的 距离 
4.2.13 ”修饰 文本 


span 是 没有 任何 语义 的 行内 元 素 ， 适 合 包 囊 短语 、 流 动 对 象 等 内 容 ， 而 div 适合 包含 块 级 内 容 。 


如 果 和 希望 为 行内 对 象 应 用 下 面 项 目 ， 则 可 以 考虑 使 用 span 元 素 。 


回 HIMLS 属性 ， 如 class、dir、id、lang、title 等 。 
回 ”CSS 样式。 
JavaScript 脚本 。 
【示例 】 下 面 示例 使 用 span 元 素 为 行内 文本 HTML 应 用 CSS 样式 ， 设 计 其 显示 为 红色 。 
<style type="text/css"> 
‘Ted { color red; } 
</style> 
<p><span class="red">HTML</span> 是 通 向 Web 技术 世界 的 钥匙 。</p> 


在 上 面 示例 中 ， 想 对 一 小 块 文字 指定 不 同 的 颜色 ， 但 从 句子 的 上 下 文 看 ， 没 有 一 个 语义 上 适合 的 


， HTML 元 素 ， 因 此 额外 添加 了 span 元 素 ， 定 义 一 个 类 样式 。 


span 没有 语义 ， 也 没有 默认 格式 ， 用 户 可 以 使 用 CSS 添加 类 样式 。 可 以 对 一 个 span 元 素 同时 添 


| 加 elass 和 这 属性 , 二 者 区 别 ; class 用 于 一 组 元 素 , 而 这 用 于 页 面 中 单独 的 、 唯 一 的 元 素 。 在 HIMILS 
| 中 ， 没 有 提供 合适 的 语义 化 元 素 时 ， 微 格式 经 常 使 用 span 为 内 容 添加 语义 化 类 名 ， 以 填补 语义 上 的 
| 空白 。 


| 4.2.14” 非 文本 注解 


在 HIML4 中 ，u 为 纯 样式 元 素 ， 用 来 为 文本 添加 下 画 线 。 在 HTMLS5 中 ，u 元 素 为 一 块 文字 添加 


明显 的 非 文本 注解 ， 如 在 中 文中 将 文本 标 为 专 有 名 词 〈 即 中 文 的 专 名 号 由)， 或 者 标明 文本 拼写 有 误 。 


【示例 】 下 面 示例 演示 了 nu 的 应 用 。 
<p>When they <u class="spelling"> recieved</u> the package, they put it with <u class="spelling">there</u></p> 
class 是 可 选 的 ，u 文本 默认 仍 以 下 画 线 显 示 ， 通 过 title 属性 可 以 为 该 元 素 包含 的 内 容 添加 注释 。 
只 有 当 cite、em、mark 等 其 他 语义 元 素 不 适用 的 情况 下 使 用 u 元 素 。 同 时 ， 建 议 重 置 u 文本 的 


| 样式 ， 以 免 与 同样 默认 添加 下 画 线 的 链接 文本 混淆 。 
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43 特殊 文本 


HTMLS 为 标识 特定 功能 的 信息 ， 新 增 很 多 文本 标签 ， 具 体 说 明 如 下 。 
4.3.1 标记 高 亮 显示 


HTMLS5 使 用 新 的 mark 元 素 实现 突出 显示 文本 。 可 以 使 用 CSS 对 mark 元素 中 的 文字 应 用 样式 (不 
应 用 样式 也 可 以 )， 但 应 仅 在 合适 的 情况 下 使 用 该 元 素 。 无 论 何 时 使 用 mark， 该 元 素 总 是 用 于 提起 浏 | 
览 者 对 特定 文本 的 注意 。 | 
最 能 体现 mark 元 素 作 用 的 应 用 : 在 网 页 中 检索 某 个 关键 词 时 ， 呈 现 的 检索 结果 ， 现 在 许多 搜索 | 
引擎 都 用 其 他 方法 实现 了 mark 元 素 的 功能 。 | 
【示例 1】 下 面 示例 使 用 mark 元 素 高 亮 显示 对 HTMLS5 这 个 关键 词 的 搜索 结果 , 演示 效果 如 图 4.5 | 


所 示 。 
<article> | 
<h2><mark>HTML5</matk> 中 国 :中 国 最 大 的 <mark>HTML5</mark> 中 文 门户 - Powered by Discuz! 官 
网 </h2> | 
<p><mark>HTML5</mark> 中 国 ,是 中 国 最 大 的 <mark>HTML5</mark> 中 文 门户 。 为 广大 ， 
<mark>html5</mark> 开 发 者 提供 <mark>html5</mark> 教 程 、<mark>html5</mark> 开 发 工具 、<mark>html5</mark> 
网 站 示例 、<mark>html5</mark> 视 频 、js 教程 等 多 种 <mark>html5</mark> 在 线 学 习 资 源 。</p> | 
<p>wwwhtml5cn.org/ - 百度 快照 - 86% 好 评 </p> 
</article> 


wmark 元 素 还 可 以 用 于 标识 引用 原文 ， 为 了 某 种 特殊 目的 而 把 原文 作者 没有 重点 强调 的 内 容 标示 | 
【示例 2】 下 面 示例 使 用 mark 元 素 唐 诗 中 欧 脚 特意 高 亮 显示 出 来 ， 效 果 如 图 4.6 所 示 。 


<article> 
<h2> 静 夜 思 </h2> 
<h3> 李 白 </h3> 
<p> 床 前 明月 <mark> 光 </mark>， 疑 是 地 上 <mark> 霜 </mark>。</p> 
<p> 举 头 望 明月 ， 低 头 思 故 <mark> 乡 </mark>。</p> 
</article> 


[DD localhost/testihtml = x WW 


© | © localhost/test1.html 


HTML5 中 国 :中 国 最 大 的 HTML5 中 文 门户 一 
Powered by Discuz! 官 网 


HTML5 中 国 ,是 中 国 最 大 的 HTNL5 中 文 门户 。 为 广大 html5 开 发 者 提供 
html 5 教程、html15 开 发 工具 、html5 网 站 示例 、html5 视 频 、js 教 程 
等 多 种 html5 在 线 学 习 资源 。 


| 
床 前 明月 光 ， 疑 是 地 上 霜 。 | 
ww html5cn. crs/ - 百度 快 昭 - 864 好 评 | 


举 头 望 明月 ， 低 头 轩 故 多 。 


图 4.5 使 用 mark 元 素 高 亮 显示 关键 字 图 4.6 使 用 mark 元 素 高 亮 显示 韵脚 | 
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AT 


| 全 注意 : 在 HIML4 中 ， 用 户 习惯 使 用 em 或 strong 元 素来 突出 显示 文字 ， 但 是 mark 元 素 的 作用 
| 与 这 两 个 元 素 的 作用 是 有 区 别 的 ， 不 能 混用 。 


mark 元 素 的 标示 目的 与 原文 作者 无 关 ， 或 者 说 它 不 是 被 原文 作者 用 来 标示 文字 的 ， 而 是 后 来 被 


”引用 时 添加 上 去 的 , 它 的 目的 是 吸引 当前 用 户 的 注意 力 , 供用 户 参 考 ,希望 能 够 对 用 户 有 帮助 .而 strong 


。 是 原文 作者 用 来 强调 一 段 文字 的 重要 性 的 ， 如 错误 信息 等 ，em 元 素 是 作者 为 了 突出 文章 重点 文字 而 
AL 用 hi. 


这 提示， 目前， 所 有 最 新 版 本 的 浏览 器 都 支持 该 元 素 。IE8 以 及 更 早 的 版 本 不 支持 mark 元 素 。 


4.3.2 标记 进度 信息 


progress 是 HTMLS5 的 新 元 素 ， 它 指示 某 项 任务 的 完成 进度 。 可 以 用 它 表 示 一 个 进度 条 ， 就 像 在 
Web 应 用 中 看 到 的 指示 保存 或 加 载 大 量 数 据 操作 进度 的 那 种 组 件 。 

支持 progress 的 浏览 器 会 根据 属性 值 自动 显示 一 个 进度 条 ， 并 根据 属性 值 对 其 进行 着 色 。 
<progress> 和 </progress> 之 间 的 文本 不 会 显示 出 来 ， 例 如 : 

<p> 安 装 进度 : <progress max="100" value="35">35%</progress></p> 


一 般 只 能 通过 JavaScript 动态 地 更 新 value 属性 值 和 元 素 里 面 的 文本 以 指示 任务 进程 。 通 过 
JavaScript 〈 或 直接 在 HTML 中 ) 将 value 属性 设 为 35 (假定 max="100")。 
progress 元 素 支 持 3 个 属性 : max、value 和 form。 它 们 都 是 可 选 的 ，max 属性 指定 任务 的 总 工 
作 量 , 其 值 必 须 大 于 0。value 是 任务 已 完成 的 量 , 值 必须 大 于 0、 小 于 或 等 于 max 属性 值 . 如 果 progress 
没有 嵌 套 在 form 元 素 里 面 ， 又 需要 将 它们 联系 起 来 ， 可 以 添加 form 属性 并 将 其 值 设 为 该 form 的 id。 
目前 ，Firefox 8+、Operall+、IE 10+、Chrome 6+、Safari 5.2+ 版 本 的 浏览 器 都 以 不 同 的 表现 形式 
对 progress 元 素 提供 了 支持 。 
【示例 】 下 面 示例 简单 演示 了 如 何 使 用 progress 元 素 ， 演 示 效 果 如 图 4.7 所 示 。 
<section> 
<p> 百 分 比 进度 : <progress id="progress" max="100"><span>0</span>%</progress></p> 
<input type="button" onclick="click10"” value=" 显 示 进 度 "/> 
</section> 
<script> 
function click10{ 
Var progress = document.getElementById('progress'): 
Progress.getElementsByTagName('span')[0].textContent ="0"; 
for(var i=0;i<=100;i++) 
UpdateProgress(D; 


} 

function updateProgress(newValue){ 

| Var progress = document.getElementById('progress'); 

| progress.value = DewValue: 

| progress.getElementsByTagName('span')[0].textContent = newValue; 


} 
</script> 


< 人 注意 : progress 元 素 不 适合 用 来 表示 度量 衡 ， 例 如 ， 磁 盘 空间 使 用 情况 或 查询 结果 。 如 需 表示 度 
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[localhost/test1.html x = 


CO tocalhost/testihtml 女 ] : 


百分比 进度 : IE 


| 
1 


图 4.7 使 用 progress 元 素 
4.3.3 标记 刻度 信息 | 
回 


meter 也 是 HIMLS 的 新 元 素 , 它 很 像 progress 元 素 。 可 以 用 meter 元 素 表 示 分 数 的 值 或 已 知 范围 | 视频 讲解 
的 测量 结果 。 简 单 地 说 ， 它 代表 的 是 投票 结果 。 例 如 ， 己 售票 数 ( 共 850 张 ， 已 售 811 张 )、 考 试 分 | 
数 (百分制 的 90 分 )、 磁 盘 使 用 量 ( 如 256 GB 中 的 74 GB) 等 测量 数据 。 

HTMLS 建议 (并 非 强制 ) 浏览 器 在 呈现 meter 时 ， 在 旁边 显示 一 个 类 似 温度 计 的 图 形 ， 即 一 个 | 
表示 测量 值 的 横 条 , 测量 值 的 颜色 与 最 大 值 的 颜色 有 所 区 别 ( 相 等 除外 )。 作 为 当前 少数 几 个 支持 meter | 
的 浏览 器 ，Firefox 正 是 这 样 显示 的 。 对 于 不 支持 meter 的 浏览 器 ， 可 以 通过 CSS 对 meter 添加 一 些 额 
外 的 样式 ， 或 用 JavaScript 进行 改进 。 

【示例 】 下 面 示例 简单 演示 了 如 何 使 用 meter 元 素 ， 演 示 效 果 如 图 4.8 所 示 。 

<p> 项 目的 完成 状态 : <meter value="0.80">80% 完 成 </meter></p> 

<p> 汽 车 损耗 程度 : <meter low="0.25" high="0.75" optimum="0" value="0.21">21%</meter></p> 

<p> 十 公里 竞走 里 程 :<meter min="0" max="13.1" value="5.5" title="Miles">4.5</meter></p> 


口 localhostis080/mysite x 全 


3 CC © localhost3080/mysite/test6.ht. 会 | } 


项 目的 充 成 状态 : 寺 咱 


汽车 损耗 程度 : 柄 
十 公里 竞走 里 程 :页 旺 


图 4.8 刻度 值 


支持 meter 的 浏览 器 (如 Firefox) 会 自动 显示 测量 值 , 并 根据 属性 值 进行 着 色 。<meter> 和 </meter> 
之 间 的 文字 不 会 显示 出 来 。 如 最 后 一 个 示例 所 示 ， 如 果 包 含 title 文本 ， 就 会 在 鼠标 悬 停 在 横 条 上 时 显 
示 出 来 。 虽 然 并 非 必需 ， 但 最 好 在 meter 里 包含 一 些 反映 当前 测量 值 的 文本 ， 供 不 支持 meter 的 浏览 
器 显示 。 | 
JE 不 支持 meter， 它 会 将 meter 元 素 里 的 文本 内 容 显 示 出 来 ， 而 不 是 显示 一 个 彩色 的 横 条 。 可 以 
通过 CSS 改变 其 外 观 。 | 

meter 不 提供 定义 好 的 单位 ， 但 可 以 使 用 title 属性 指定 单位 ， 如 最 后 一 个 例子 所 示 。 通 常 ， 浏 览 | 
器 会 以 提示 框 的 形式 显示 title 文本 。meter 并 不 用 于 标记 没有 范围 的 普通 测量 值 ， 如 高 度 、 宽 度 、 距 
离 、 周 长 等 。 

meter 元 素 包含 7 个 属性 ， 简 单 说 明 如 下 。 

value: 在 元 素 中 特别 标示 出 来 的 实际 值 。 该 属性 值 默 认为 0， 可 以 为 该 属性 指定 一 个 浮 点 小 
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数值 。 唯 一 必须 包含 的 属性 。 
回 min: 设置 规定 范围 时 ， 人 允许 使 用 的 最 小 值 ， 默 认为 0， 设 定 的 值 不 能 小 于 0。 


。 | 回 max: 设置 规定 范围 时 ， 多 许 使 用 的 最 大 值 。 如 果 设 定时 ， 该 属性 值 小 于 min 属性 的 值 ， 那 
会 岂 么 把 min 属性 的 值 视 为 最 大 值 。max 属性 的 默认 值 为 1。 

。 回 low: 设置 范围 的 下 限 值 ， 必 须 小 于 或 等 于 high 属性 的 值 。 同 样 ， 如 果 low 属性 值 小 于 min 
iote | 属性 的 值 ， 那 么 把 min 属性 的 值 视 为 low 属性 的 值 。 


回 high: 设置 范围 的 上 限 值 。 如 果 该 属性 值 小 于 low 属性 的 值 ， 那 么 把 low 属性 的 值 视 为 high 

属性 的 值 , 同样 , 如 果 该 属性 值 大 于 max 属性 的 值 , 那么 把 max 属性 的 值 视 为 high 属性 的 值 。 

回 optimum: 设置 最 佳 值 ， 该 属性 值 必须 在 min 属性 值 与 max 属性 值 之 间 ， 可 以 大 于 high 属 
性 值 。 

回 form: 设置 meter 元 素 所 属 的 一 个 或 多 个 表单 。 


总 提示 : 目前 ，Safari 5.2+、Chrome 6+、Opera 11+、Firefox 16+ 版 本 的 浏览 器 支持 meter 元 素 。 济 
| 览 器 对 meter 的 支持 情况 还 在 变化 ， 关 于 最 新 的 浏览 器 支持 情况 ， 参 见 http://caniuse.com/ 
#feat=progressmeter, 


网 上 有 人 试 过 针对 支持 meter 的 浏览 器 和 不 支持 的 浏览 器 统一 编写 meter 的 CSS。 在 网 上 搜索 
“style HTML5 meter with CSS” 就 可 以 找到 一 些 解决 方案 ， 其 中 的 一 些 用 到 了 JavaScript。 


4.3.4 标记 时 间 信 息 


| 使 用 time 元 素 标记 时 间 、 日 期 或 时 间 段 ， 这 是 HTML5 新 增 的 元 素 。 呈 现 这 些 信息 的 方式 有 多 
| 种 ， 例 如 : 
| < 我 们 在 每 天 早上 <time>9:00<jtime> 开始 营业 。<Jp> 

<p> 我 在 <time datetime="2018-02-14"> 情 人 节 </time> 有 个 约会 。</p> 
| time 元 素 最 简单 的 用 法 是 不 包含 datetime 属性 。 在 忽略 datetime 属性 的 情况 下 ,它们 的 确 提供 了 
”具备 有 效 的 机 器 可 读 格式 的 时 间 和 日 期 。 如 果 提供 了 datetime 属性 , time 标签 中 的 文本 可 以 不 严格 使 
用 有 效 的 格式 ， 如 果 忽 略 datetime 属性 ， 文 本 内 容 就 必须 是 合法 的 日 期 或 时 间 格 式 。 
| time 中 包含 的 文本 内 容 会 出 现在 屏幕 上 , 对 用 户 可 见 , 而 可 选 的 datetime 属性 则 是 为 机 器 准备 的 。 
”该 属性 需要 遵循 特定 的 格式 。 浏 览 器 只 显示 time 元 素 的 文本 内 容 ， 而 不 会 显示 datetime 的 值 。 
datetime 属性 不 会 单独 产生 任何 效果 ， 但 可 以 用 于 在 Web 应 用 (如 日 历 应 用 ) 之 间 同 步 日 期 和 
| 时 间 。 这 就 是 必须 使 用 标准 的 机 器 可 读 格式 的 原因 ， 这 样 程序 之 间 就 可 以 使 用 相同 的 “语言 ”来 共 
| 享 信息 。 


| 这 提示 : 不 能 在 linie 元 素 中 旗 套 另 一 个 ne 元素 ， 电 不 能 在 没有 datetime 属性 的 ne 元 素 中 包含 
| 其 他 元 素 (只 能 包含 文本 ) 。 


| 在 早期 的 HTMLS5 说 明 中 ，time 元 素 可 以 包含 一 个 名 为 pubdate 的 可 选 属性 。 不 过 ， 后 来 pubdate 
| 已 不 再 是 HTMLS5 的 一 部 分 。 读 者 可 能 在 早期 的 HTMLS5 示例 中 碰 到 该 属性 。 
【拓展 】 
datetime 属性 (或 者 没有 datetime 属性 的 time 元 素 ) 必 须 提供 特定 的 机 器 可 读 格式 的 日 斯 和 时 间 ， 
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这 可 以 简化 为 下 面 的 形式 。 
YYYY-MM-DDThh:mm:ss 
例如 (当地 时 间 ): 四 
2018-11-03T17:19:10 | 到 


表示 “当地 时 间 2018 年 11 月 3 日 下 午 5 时 19 分 10 秒 ”。 小 时 部 分 使 用 24 小 时 制 ,因此 表示 下 
午 5 点 应 使 用 17， 而 非 05。 如 果 包 含 时 间 ， 秒 是 可 选 的 。 也 可 以 使 用 hh:mm.sss 格式 提供 时 间 的 毫 | 
秒 数 。 注 意 ， 毫 秒 数 之 前 的 符号 是 一 个 点 。 | 
如 果 要 表示 时 间 段 ， 则 格式 稍 有 不 同 。 有 几 种 语法 ， 不 过 最 简单 的 形式 如 下 所 示 。 
nh nm ns 
其 中 ，3 个 nn 分别 表 示 小 时 数 、 分 钟 数 和 秒 数 。 | 
也 可 以 将 日 期 和 时 间 表 示 为 世界 时 ,在 末尾 加 上 字母 Z, 就 成 了 UTC(Coordinated Universal Time， | 
全 球 标准 时 间 )。UTC 是 主要 的 全 球 时 间 标 准 。 例 如 (使 用 UTC 的 世界 时 ): | 
2018-11-03T17:19:10Z 


也 可 以 通过 相对 UTC 时 差 的 方式 表示 时 间 。 这 时 不 写字 母 Z， 写 上 - ( 减 ) 或 +〈 加 ) 及 时 差 即 
可 。 例 如 ， 含 相对 UTC 时 差 的 世界 时 。 | 


2018-11-03T17:19:10-03:30 | 
表示 “ 纽 芬兰 标准 时 (NST) 2018 年 11 月 3 日 下 午 5 时 19 分 10 秒 ”(NST 比 UTC 晚 3.5 小 时 )。 | 
容 提示 : 如 果 确 实 要 包含 datetime， 不 必 提供 时 间 的 完整 信息 。 


4.3.5 标记 联系 信息 


HTML 没有 专门 用 于 标记 通讯 地 址 的 元 素 ，address 元 素 是 用 以 定义 与 HIML 页 面 或 页 面 一 部 分 
(如 一 篇 报告 或 新 文章 ) 有 关 的 作者 、 相 关 人 士 或 组 织 的 联系 信息 ， 通 常 位 于 页 面 底部 或 相关 部 分 内 
容 。 至 于 address 具体 表示 的 是 哪 一 种 信息 ， 取 决 于 该 元 素 出 现 的 位 置 。 

【示例 】 下 面 是 一 个 简单 的 联系 信息 演示 示例 。 


<main role="main"> 
<article> 
<h1> 文 章 标题 <hl> 
<p> 文 章 正文 </p> 
<footer> 
<p> 说 明文 本 </p> 
<address> 
<a href="mailto:zhangsan(@163.com">zhangsan(@163.com</a>. 
</address> 
</footer> 
</article> 
</main> 
<footer role="contentinfo"> 
<p><small>&copy:; 2018 baidu, Inc.</small></p> 
<address> 
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北京 8 号 <a hre 全 "index.html"> 首 页 </a> 
</address> 
</footer> 


会 内 大 多 数 时候 , 联系 信息 的 形式 是 作者 的 电子 邮件 地 址 或 指向 联系 信息 页 的 链接 。 联 系 信 息 也 有 可 
~ | 能 是 作者 的 通讯 地 址 ， 这 时 将 地 址 用 address 标记 就 是 有 效 的 。 但 是 用 address 标记 公司 网 站 “联系 我 
7 们 ”页 面 中 的 办 公 地 点 ， 则 是 错误 的 用 法 。 
| 在 上 面 示例 中 ， 页 面 有 两 个 address 元 素 : 一 个 用 于 article 的 作者 ， 另 一 个 位 于 页 面 级 的 footer 
| 里 ， 用 于 整个 页 面 的 维护 者 。 注意 ，article 的 address 只 包含 联系 信息 。 尽 管 article 的 footer 里 也 有 关 
| 于 作者 的 背景 信息 ， 但 这 些 信息 是 位 于 address 元 素 外 面 。 


| address 元 素 中 的 文字 默认 以 斜体 显示 。 如 果 address 嵌 套 在 article 里 ， 则 属于 其 所 在 的 最 近 的 
| article 元 素 ; 否则 属于 页 面 的 body。 说 明 整 个 页 面 的 作者 的 联系 信息 时 ， 通 常 将 address 放 在 footer 
元 素 里 。article 里 的 address 提供 的 是 该 article 作者 的 联系 信息 ， 而 不 是 嵌 套 在 该 article 里 的 其 他 任 
| 何 article (如 用 户 评论 ) 的 作者 的 联系 信息 。 

| address 只 能 包含 作者 的 联系 信息 ， 不 能 包括 其 他 内 容 ， 如 文档 或 文章 的 最 后 修改 时 间 。 此 外 ， 

HTMLS5 禁止 在 address 里 包含 以 下 元 素 : h1 一 6、article、address、aside、footer、header、hgroup、 


nav 和 section。 


4.3.6 标记 显示 方向 


| 如 果 在 HTML 页面 中 混合 了 从 左 到 右 书写 的 字符 《〈 如 大 多 数 语言 所 用 的 拉丁 字符 ) 和 从 右 到 磊 
| 书写 的 字符 (如 阿拉 伯 语 或 希 伯 来 语 字符 )， 就 可 能 要 用 到 bdi 和 bdo 元 素 。 
| 要 使 用 bdo， 必 须 包含 dir 属性 ， 取 值 包括 lx (由 左 至 右 ) 或 tl (由 右 至 左 )， 指 定 希 望 呈现 的 显 
| 示 方 向 。 
| bdo 适用 于 段落 里 的 短语 或 句子 , 不 能 用 它 包 围 多 个 段落 。bdi 元 素 是 HTML5 中 新 加 的 元 素 , 用 
| 于 内 容 的 方向 未 知 的 情况 ， 不 必 包 含 dir 属性 ， 因 为 默认 已 设 为 自动 判断 。 
| 【示例 】 下 面 示例 设置 用 户 名 根据 语言 不 同 自动 调整 显示 顺序 。 
<u> 

<li><bdi>jcranmer</bdi></l> 

<li><bdi>hober</bdi></l> 

<li><bdi> LL </bd></l> 
</ul> 


| 目前 ， 只 有 Firefox 和 Chrome 浏览 器 支持 bdi 元 素 。 
4.3.7 ”标记 换行 断 点 


HTMLS 为 br 引入 了 一 个 相近 的 元 素 wbr。 它 代表 “一 个 可 换行 处 ”， 可 以 在 一 个 较 长 的 无 间断 
”短语 (如 URL) 中 使 用 该 元 素 ， 表 示 此 处 可 以 在 必要 时 进行 换行 ， 从 而 让 文本 在 有 限 的 空间 内 更 
| 具 可 读 性 。 因此, 与 br 不 同 ，wbr 不 会 强制 换行 ,而 是 让 浏览 器 知道 哪里 可 以 根据 需要 进行 换行 。 
| 【示例 】 下 面 示例 为 URL 字符 串 添加 换行 符 标 签 ， 这 样 当 窗口 宽度 变化 时 ， 浏 览 器 会 自动 根据 
， 断 点 确定 换行 位 置 ， 效 果 如 图 49 所 示 。 

<p> 本 站 旧地 址 为 : https:<wbr>/<wbr>wwwold site com/， 新 地 址 为 : https:<wbr>//<wbr>wwwnew_site.com/。</p> 
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; 
© ET ETSCSR IE 


localhost/test1.htm 
本 站 旧地 址 为 ，htps-/vww.old_site com/， 新 地 址 为 : © | © localhost/testi html | ! 


https://Wwww.new_site.com/。 


本 站 | 旧地 址 为 ，https://wwm. old_site. com/， 新 地 址 为 ，https: 


| 
| 
| 
| , 
/ /mmm nem_site. com/» | 
| 
| 


(a) 正 中 换行 断 点 无 效 (b) Chrome 中 换行 断 点 有 效 
图 4.9 定义 换行 断 点 


4.3.8” 旁 注 标 记 


旁 注 标记 是 东亚 语言 (如 中 文 和 日 文 ) 中 一 种 避 用 符号 ， 通 常用 于 表示 生僻 字 的 发 音 。 这 些小 的 | 
注解 字符 出 现在 它们 标注 的 字符 的 上 方 或 右 方 。 它 们 常 简称 为 旁 注 (ruby 或 mbi)。 日 语 中 的 旁 注 字 ， 
符 称 为 振 假名 。 

ruby 元 素 以 及 它们 的 子 元 素 rt 和 四 是 HTML5 中 为 内 容 添 加 旁 注 标记 的 机 制 。rt 指明 对 基准 字 | 
符 进 行 注解 的 旁 注 字符 。 可 选 的 名 元 素 用 于 在 不 支持 ruby 的 浏览 器 中 的 旁 注 文本 周围 显示 括号 。 | 

【示例 】 下 面 示例 演示 如 何 使 用 <mby> 和 <rt> 标 签 为 词语 旁 注 ， 效 果 如 图 4.10 所 示 。 


<mby> 
北 <mp>(<hp><r> 7 </rt><rp>)</p> 
京 <Ip>(</rp><re> 中 | 人 </rt><mp>)</mp> 
</ruby> 


| 
x | 
Poe t+) - hp//ocalho.. - BO | 


4.10 ” 旁 注 标记 


可 以 看 到 在 不 支持 mby 的 浏览 器 中 括号 的 重要 性 。 没 有 它们 ， 基 准 字符 和 旁 注 文 本 就 会 显示 在 

一 起 ， 让 内 容 变 得 混乱 。 
支持 旁 注 标记 的 浏览 器 会 将 旁 注 文本 显示 在 基准 字符 的 上 方 〈 也 可 能 在 旁边 )， 不 显示 括号 。 不 

支持 旁 注 标记 的 浏览 器 会 将 旁 注 文本 显示 在 括号 里 ， 就 像 普 通 的 文本 一 样 。 | 
目前 ,下 9+、Firefox、Opera、Chrome 和 Safari 都 支持 这 3 个 标签 。 


4.4 HTMLS 全 局 属性 


HTML5 除了 支持 HTML4 原 有 的 全 局 属性 之 外 ， 还 添加 了 8 个 新 的 全 局 属性 。 所 谓 全 局 属性 是 ， 
指 可 以 用 于 任何 HTML 元 素 的 属性 。 
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4.4.1 可 编辑 内 容 


| contentEditable 属性 的 主要 功能 是 允许 用 户 可 以 在 线 编辑 元 素 中 的 内 容 。contentEditable 是 一 个 布 
| 尔 值 属性 ， 可 以 被 指定 为 tue 或 false。 


< 名 注意 : 该 属性 还 有 个 隐藏 的 inherit (继承 ) 状态， 属性 为 tmue 时 ， 元 素 被 指定 为 允许 编辑 ; 属性 
| 为 false 时 ， 元 素 被 指定 为 不 多 许 编辑 ; 未 指定 true 或 false 时 ， 则 由 inherit 状态 来 决定 ， 
如 果 元 素 的 父 元 素 是 可 编辑 的 ， 则 该 元 素 就 是 可 编辑 的 。 


【示例 】 在 下 面 示例 中 为 正文 文本 包含 框 <div> 标 签 加 上 contentEditable 属性 后 ， 该 包含 框 包含 
的 文本 就 变 成 可 编辑 的 了 ， 浏 览 者 可 自行 在 浏览 器 中 修改 内 容 ， 执 行 结 果 如 图 4.11 所 示 。 


<div contentEditable="true"> 
<p> 旧 有 全 局 属性 : id、class、style、title、accesskey、tabindex、lang、dir</p> 
<p> 新 增 全 局 属性 : contenteditable、contextmenu、data-* 、draggable、dropzone、hidden 、spellcheck、 
translate</p> 
</div> 


[loralhostisoeo/mysite, DD Iecalhests080/mysit 
© | © localhosL80 ysite/te. : © |© localhost:a080/myslte/te... 女皇 
| 晶 有 全 局 属性 : id、class、style、title、 新 增 全 局 属性 : contenteditabl 
accesskey，tabindex、lang、dir contextmenu、data-*、draggable、 


新 增 全 局 属性 : contenteditable、 
Contextmenu、data-*、draggable、 
dropzone、 hidden、 spellcheck. translate 


drepzene、hidd spellcheck、 translate 


(a) 原始 列表 (b) 编辑 列表 项 项 目 
图 4.11 可 编辑 文本 

在 编辑 完 元 素 中 的 内 容 后 ， 如 果 想 要 保存 其 中 内 容 ， 只 能 使 用 JavaScript 脚本 把 该 元 素 的 
innerHTML 发 送 到 服务 器 端 进行 保存 , 因为 改变 元 素 内 容 后 该 元 素 的 innerHTML 内 容 也 会 随 之 改变 ， 
目前 还 没有 特别 的 API 来 保存 编辑 后 元 素 中 的 内 容 。 
| 安 提示 : 在 JavaScript 脚本 中 ， 元 素 还 具有 一 个 isContentEditable 属性 ， 当 元 素 可 编辑 时 ， 该 属性 
值 为 true; 当 元 素 不 可 编辑 时 ， 该 属性 值 为 false。 利 用 这 个 属性 ， 可 以 实现 对 编辑 数据 的 
后 期 操作 。 


4.4.2 快捷 菜单 


contextmenu 属性 用 于 定义 元 素 的 上 下 文 菜单 。 所谓 上 下 文 菜单 ， 就 是 会 在 用 户 右 击 元 素 时 出 现 。 
| 【示例 】 下 面 示 例 使 用 contextmenu 属性 定义 <div> 元 素 的 上 下 文 菜单 ， 其 中 contextmenu 属性 的 
| 值 是 要 打开 的 <menu> 元 素 的 id 属性 值 。 
| <div contextmenu="mymenu"> 上 下 文 菜单 
<menu type="context" id="mymenu"> 
<menuitem label=" 微 信 分 享 "></menuitem> 
<menuitem label=" 微 博 分 享 "></menuitem> 
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</menu> 
</div> | 
当 用 户 右 击 元 素 时 ， 会 弹出 一 个 上 下 文 菜单 ， 从 中 可 以 选择 指定 的 快捷 菜单 项 目 ， 如 图 4.12 所 示 。 
全 
| Note 


图 4.12 打开 上 下 文 菜单 


安 提示 : 目前 只 有 Firefox 支持 contextmenu 属性 。 


4.4.3 自 定义 属性 


使 用 data-* 属 性 可 以 自 定义 用 户 数据 。 有 具体 应 用 包括 如 下 。 
回 “data-* 属 性 用 于 存储 页 面 或 元 素 的 私有 数据 。 
data-* 属 性 赋予 所 有 HTML 元 素 嵌 入 自 定 义 属性 的 能 力 。 | 
存储 的 自 定义 数据 能 够 被 页 面 的 JavaScript 脚本 利用 ,以 创建 更 好 的 用 户 体验 , 方便 Ajax 调用 或 
服务 器 端 数 据 库 查询 。 | 
data-* 属 性 包括 下 面 两 部 分 。 
回 ”属性 名 : 不 应 该 包含 任何 大 写字 母 ， 并 且 在 前 缀 "data-" 之 后 必须 有 至 少 一 个 字符 。 
回 ”属性 值 : 可 以 是 任意 字符 串 。 
当 浏 览 器 解析 时 ， 会 忽略 前 级 "data-"， 取 用 其 后 的 自 定义 属性 。 | 
【示例 1】 下 面 示例 使 用 data-* 属 性 为 每 个 列表 项 目 定义 一 个 自 定义 属性 type， 这 样 在 JavaScript | 
脚本 中 可 以 判断 每 个 列表 项 目 包 含 信息 的 类 型 。 | 
< 
<li data-animal-type="birdv> 猫 头 座 </i> 
<li data-animal-type="fishr> 鲤 鱼 </i> 
-<li data-animal-type="spider"> 蜂 蛛 </li> 
</lu> | 
【示例 2】 以 示例 1 为 基础 ， 下 面 示例 使 用 JavaScript 脚本 访问 每 个 列表 项 目的 type 属性 值 ， 演 
示 效 果 如 图 4.13 所 示 。 | 
< 
<idata-animal-type="bird> 猫 头 应 </Ii> | 
<li data-animal-type="fish"> 鲁 鱼 </li> 人 
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<li data-animal-type="spider"> 蜂 蛛 </li> 
</ul> 
<script> 
| var lis = document.getElementsByTagName("li"); 
优 ?) for(vari=0; i<lislength; if 
gi console.log(lis[i].dataset.animalType); 


| 
a 


Dlocolhosttest2html x 
© [© localhosVtest2 niml 


。 猫 头 区 
， 凶 鱼 


图 4.13 访问 列表 项 目的 type 属性 值 
| 访问 元 素 的 自 定义 属性 ， 可 以 通过 元 素 的 dataset 对 象 获 取 ， 该 对 象 存储 了 元 素 所 有 自 定 义 属性 
| 的 值 。 访 问 规 则 与 CSS 脚本 化 访问 相同 。 对 于 复合 属性 名 ， 通 过 驼峰 命名 法 访问 ， 如 animal-type， 
| 访问 时 使 用 animalType， 避 免 连 字符 在 脚本 中 引发 的 歧义 。 


Bi 目前 IE 暂 不 支持 这 种 访问 方式 。 


444 定义 可 拖 动 操 作 


draggable 属性 可 以 定义 元 素 是 否 可 以 被 拖 动 。 属 性 取 值 说 明 如 下 。 

回 tme: 定义 元 素 可 拖 动 。 

false: 定义 元 素 不 可 拖 。 

auto: 定义 使 用 浏览 器 的 默认 行为 。 

draggable 属性 常用 在 拖 放 操作 中 ， 详 细 说 明 请 参考 后 面 章节 的 “ 拖 放 API”。 


445 拖 动 数据 


dropzone 属性 定义 在 元 素 上 拖 动 数 据 时 , 是 否 复制 、 移 动 或 链接 被 拖 动 数据 。 属性 取 值 说 明 如 下 。 
回 ”copy: 拖 动 数据 会 产生 被 拖 动 数据 的 副本 。 
回 “move: 拖 动 数 据 会 导致 被 拖 动 数 据 被 移动 到 新 位 置 。 
回 link:， 拖 动 数据 会 产生 指向 原始 数据 的 链接 。 
例如 : 
| <div dropzone="copy"></div> 
， 深 提示 : 目前 所 有 主流 浏览 器 都 不 支持 dropzone 属性 。 
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4.4.6 ”隐藏 元 素 | 
| 回 
在 HTMLS 中 ,所 有 元 素 都 包含 一 个 hidden 属性 。 该 属性 设置 元 素 的 可 见 状态 ， 取 值 为 一 个 布尔 ， 久 频 恋 角 
值 ， 当 设 为 tue 时 ， 元 素 处 于 不 可 见 状态 ， 当 设 为 false 时 ， 元 素 处 于 可 见 状态 。 | 图 、 
【示例 】 下 面 使 用 hidden 属性 定义 段落 文本 隐藏 显示 。 | rm 
0 


<p hidden><img src="images/1.jpg" width="200" /></p> 


hidden 属性 可 用 于 防止 用 户 查看 元 素 ， 直 到 匹配 某 些 条 件 ， 如 选中 了 某 个 复 选 框 。 然 后 ， 在 页 面 
加 载 之 后 ， 可 以 使 用 JavaScript 脚本 删除 该 属性 ， 删 除 之 后 该 元 素 变 为 可 见 状态 ， 同 时 元 素 中 的 内 容 | 
也 即时 显示 出 来 。 | 


准 提示 : 除了 下 浏览 器 ， 所 有 主流 浏览 器 都 支持 hidden 属性 。 


4.4.7 ”语法 检查 


spellcheck 属性 定义 是 否 对 元 素 进行 拼写 和 语法 检查 。 可 以 对 以 下 内 容 进 行 拼写 检查 。 

input 元 素 中 的 文本 值 〈 非 密码 ) 。 

<textarea> 元 素 中 的 文本 。 

回 “可 编辑 元 素 中 的 文本 。 

spellcheck 属性 是 一 个 布尔 值 的 属性 ， 取 值 包括 tue 和 false， 为 true 时 表示 对 元 素 进 行 拼写 和 语 | 
法 检查 ， 为 false 时 则 不 检查 元 素 ， 用 法 如 下 所 示 。 | 

<!-- 以 下 两 种 书写 方法 正确 --> 

<textarea spellcheck="true" > 

<input type=text spellcheck=false> 

<!-- 以 下 书写 方法 为 错误 --> 

<textarea spellcheck > 


< 人 注意 : 如 果 元 素 的 readOnly 属性 或 disabled 属性 设 为 tue， 则 不 执行 拼写 检查 。 


【示例 】 下 面 示例 设计 两 段 文本 ， 第 一 段 文本 可 编辑 、 可 语法 检查 ;第 二 段 文 本 可 编辑 ， 但 不 允 
许 语法 检查 。 当 编辑 文本 时 ， 第 一 段 文本 显示 检查 状态 ， 而 第 二 段 忽 略 ， 如 图 4.14 所 示 。 | 


<div contentEditable="true"> 
<p spellcheck="true"> 旧 有 全 局 属性 : id、class、style、title、accesskey、tabindex、lang、dir</p> 
<p spellcheck="false"> 新 增 全 局 属性 : contenteditable、 contextmenu、 data-*、draggable、dropzone、 hidden、 
spellcheck、translate</p> 
</div> 


DD locahostsoan/mysite x 


tabindex, lang、 dir 


新 增 全 后 层 性 : contenteditable、contextmenu、 
Hata-*、 draggable、droprone、 hidden、 
spellcheck, translate 


图 4.14 段落 文本 检查 状态 比较 
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4.4.8 翻译 内 容 
| translate 属性 定义 是 否 应 该 翻译 元 素 内 容 。 取 值 说 明 如 下 。 


全 站 。” @ yes: 定义 应 该 翻译 元 素 内 容 。 
，。 回 no 定义 不 应 翻译 元 素 内 容 。 
【示例 】 下 面 示例 演示 了 如 何 使 用 translate 属性 。 


<p translate="no"> 请 勿 翻译 本 段 。</p> 
<p> 本 段 可 被 译 为 任意 语言 。</p> 


| 这 提 示 : 日前 ， 所 有 主流 浏览 器 都 无 法 正确 地 支持 translate 属性 . 


4.5 在 线 练 习 


本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HTMLS5 语义 标签 灵活 定义 网 页 文本 样式 和 版 


| 式 。 感 兴趣 的 同学 可 以 扫 码 强化 练习 。 
通 各 
i 


第 心 ) 蕴 


设计 HTML5 图 像 和 多 媒体 


在 网 页 中 恰当 应 用 多 媒体 技术 ,不 仅 能 够 传递 丰富 的 信息 ,还 可 以 美化 页 面 ,提升 浏览 
者 的 审美 体验 .在 HTML5 之 前 ,为 网 页 添加 多 媒体 的 唯一 方法 就 是 使 用 插件 ,如 Adobe Flash 
Player 和 羊 果 的 QuickTime 等 。HTML5 引入 原生 的 多 媒体 技术 ,改变 了 这 一 状况 ， 但 是 不 
同 浏览 器 支持 不 同 格式 的 视频 和 音频 。 本 章 将 详细 讲解 不 同类 型 的 多 媒体 对 象 在 网 页 中 的 


使 用 


【 学 习 重 点 】 

认识 网 页 图 像 

在 页 面 中 插入 图 像 

设置 图 像 理 代 文本 、 图 像 尺 寸 等 属性 

在 网 页 中 添加 音频 和 视频 

设置 视频 自动 播放 、 循 环 播 放 和 海报 图 像 等 属性 
使 用 多 种 来 源 的 视频 和 备用 文本 


至 吾 吾 吾 吾 至 
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5.1 认识 HIMLS 图 像 


常用 网 页 图 像 的 格式 有 3 种 : GIF、JPEG 和 PNG。 下 面 简单 比较 这 3 种 图 像 格式 的 特点 。 
1. GIF 图 像 


GIF 图 像 格 式 最 早 于 1987 年 开发 ， 经 过 多 年 改进 ， 其 特性 如 下 。 

(1) 具有 跨 平台 能 力 ， 不 用 担心 兼容 性 问题 。 

(2) 具有 一 种 减少 颜色 显示 数目 而 极度 压缩 文件 的 能 力 。 它 压缩 的 原理 是 不 降低 图 像 的 品质 ， 
而 是 减少 显示 色 ， 最 多 可 以 显示 的 颜色 是 256 色 ， 所 以 它 是 一 种 无 损 压 缩 。 

(3) 支持 背景 透明 的 功能 ， 便 于 图 像 更 好 地 融合 到 其 他 背景 色 中 。 

(4) 可 以 存储 多 张 图 像 ， 并 能 动态 显示 这 些 图 像 ，GIF 动画 目前 在 网 上 广泛 运用 。 

2. JPEG 图 像 


JPEG 格式 使 用 全 彩 模式 来 表现 图 像 ， 具 体 特性 如 下 。 

(1) 与 GIF 格式 不 同 ，JPEG 格式 的 压缩 是 一 种 有 损 压 缩 ， 即 在 压缩 处 理 过 程 中 ， 图 像 的 某 些 细 
节 将 被 忽略 ， 因 此 ， 图 像 将 有 可 能 会 变 得 模糊 一 些 ， 但 一 般 浏览 者 是 看 不 出 来 的 。 

(2) 与 GIF 格式 相同 ， 它 也 具有 跨 平台 的 能 力 。 

(3) 支持 1670 万 种 颜色 ， 可 以 很 好 地 再 现 摄影 图 像 ， 尤 其 是 色彩 丰富 的 大 自然 。 

(4) 不 支持 GIF 格式 的 背景 透明 和 交错 显示 功能 。 


3. PNG 图 像 
PNG 图 像 格式 于 1995 年 开发 ， 是 一 种 网 络 专用 图 像 ， 它 具有 GIF 格式 图 像 和 JPEG 格式 图 像 的 


双重 优点 。 一 方面 它 是 一 种 新 的 无 损 压缩 文件 格式 ， 压缩 技术 比 GIF 好 ; 另 一 方面 它 支 持 的 颜色 数量 


| 达到 了 1670 万 种 ， 同 时 还 包括 对 索引 色 、 灰 度 、 真 彩色 图 像 以 及 Alpha 通道 透明 的 支持 。PNG 是 


| Adobe Fireworks 固有 的 文件 格式 。 


PNG 包括 多 个 子 类 : PNG-8、PNG-24 和 PNG-32。 一 般 来 说 ， 对 于 PNG 和 GIF， 应 优先 选择 


PNG， 因 为 它 对 透明 度 的 支持 更 好 ， 压 缩 算法 也 更 好 ， 产 生 的 文件 更 小 。 


回 PNG-8 适用 于 标识 、 重 复 的 图 案 以 及 其 他 颜色 较 少 的 图 像 或 具有 连续 颜色 的 图 像 ， 支持 256 
色 ， 支 持 索 引 色 〈 基 本 ) 透明 和 alpha 透明 。 

回 PNG-24 与 PNG-8 相似 ， 不 过 支持 颜色 更 多 的 图 像 。 适 用 于 颜色 丰富 且 质 量 要 求 高 的 照片 ， 
支持 1600 万 以 上 颜色 数 ， 仅 支持 索引 色 〈 基 本 ) 透明 。 

回 PNG-32 与 PNG-24 相似 ， 不 过 支持 具有 alpha 透明 的 图 像 ， 以 及 1600 万 以 上 的 颜色 。 

GIF 和 PNG-8 图 像 只 有 256 种 颜色 ， 对 标志 和 图 标 来 说 通常 这 已 经 足够 了 。JPEG、PNG-24 和 


PNG-32 均 支 持 超过 1600 万 种 的 颜色 ， 因 此 照片 和 复杂 的 插图 应 选择 这 些 格式 。 不 过 对 于 这 些 图 像 ， 
大 多 数 情况 下 应 使 用 JPEG。 


在 网 页 设计 中 ,如 果 图 像 颜色 少 于 256 色 时 ， 建 议 使 用 GIF 格式 ， 如 Logo 等 ; 而 颜色 较 丰 富 时 ， 


| 应 使 用 JPEG 格式 ， 如 在 网 页 中 显示 的 自然 画面 的 图 像 
， 肉 提示 : 使 用 SVG 图 像 语言 创建 的 图 像 ， 无 论 放大 还 是 缩小 都 不 会 影响 其 质量 。 目 前 ， 几 乎 所 有 


的 现代 浏览 器 都 提供 基本 的 SVG 支持 ， 因 此 用 户 可 以 在 网 页 中 使 用 SVG。 
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5.2 使 用 图 像 


加 载 HTML 文档 中 标记 的 图 像 。 不 过 ， 图 像 加 载 时 间 与 访问 者 的 网 络 连接 强度 、 图 像 尺 寸 ， 以 及 页 | Note 


可 以 在 网 页 中 插入 各 种 类 型 的 图 像 ， 从 标志 到 照片 都 可 以 。 当 访问 者 浏览 网 页 时 ,浏览 器 会 自动 
面 中 包含 的 图 像 个 数 相关 。 
5.2.1 使 用 img 元 素 


在 HTML5 中 ， 使 用 <img> 标 签 可 以 把 图 像 插入 网 页 中 ， 有 具体 用 法 如 下 。 
<img src="URL" alt=" 蔡 代 文 本 " /> | 
img 元 素 向 网 页 中 嵌入 一 幅 图 像 ， 从 技术 上 分 析 ，<img> 标 签 并 不 会 在 网 页 中 插入 图 像 ， 而 是 从 
网 页 上 链接 图 像 ，<img> 标 签 创建 的 是 被 引用 图 像 的 占 位 空间 。 
次 提示 ， <img> 标 签 有 两 个 必需 的 属性 : src 属性 和 alt 属性 ， 具 体 说 明 如 下 。 
alt: 设置 图 像 的 替代 文本 。 使 用 alt 属性 可 以 为 图 像 添加 一 段 描述 性 文本 ， 当 图 像 出 
于 某 种 原因 不 显示 的 时 候 ， 就 将 这 段 文字 显示 出 来 。 屏 幕 阅读 器 可 以 朗读 这 些 文本 ， 
帮助 视 障 访问 者 理解 图 像 的 内 容 。 
src: 定义 显示 图 像 的 URL。 
【示例 】 在 下 面 示例 中 ， 在 页 面 中 插入 一 幅 照 片 ， 在 浏览 器 中 预览 效果 如 图 5.1 所 示 。 
<img src="images/1.jpg" width="400" alt=" 读 书 女生 "/> 


CS https//localhostiestt - BC | E localhost 


图 5.1 在 网 页 中 插入 图 像 


HTML5 为 <img> 标 签 定 义 了 多 个 可 选 属 性 ， 简 单 说 明 如 下 。 
height: 定义 图 像 的 高 度 。 取 值 单位 可 以 是 像素 或 者 百分比 。 
width: 定义 图 像 的 宽度 。 取 值 单位 可 以 是 像素 或 者 百分比 。 
ismap: 将 图 像 定 义 为 服务 器 端 图 像 映射 。 

usemap: 将 图 像 定 义 为 客户 器 端 图 像 映射 。 

longdesc: 指向 包含 长 的 图 像 描 述 文档 的 URL。 


图 图 图 图 加 
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其 中 不 再 推荐 使 用 HTML4 中 部 分 属性 ， 如 align (水 平 对 齐 方式 ) 、border (边框 粗细 ) 、hspace 
(左右 空白 ) 、vspace (上 下 空白 ) ， 对 于 这 些 属性 ，HTMLS5 建议 使 用 CSS 属性 代替 使 用 。 


5.2.2 ”定义 流 内 容 


流 内 容 是 由 页 面 上 的 文本 引述 出 来 的 。 在 HTMLS5 出 现 之 前 ， 没 有 专门 实现 这 个 目的 的 元 素 ， 因 
| 此 一 些 开 发 人 员 使 用 没有 语义 的 div 元 素来 表示 。 通 过 引入 figure 和 figcaption，HTMLS 改变 了 这 种 
博 况 。 
流 内 容 可 以 是 图 表 、 照 片 、 图 形 、 插 图 、 代 码 片段 ， 以 及 其 他 类 似 的 独立 内 容 ， 可 以 由 页 面 上 的 
其 他 内 容 引 出 figure。figcaption 是 figure 的 标题 ， 是 可 选 的 ， 出 现在 figure 内 容 的 开头 或 结尾 处 ， 
例如 : 
<figure> 
<p> 思 索 </p> 
<img src="images/1.jpg" width="350" /> 
</figure> 
这 个 figure 只 有 一 个 照片 ， 不 过 放置 多 个 图 像 或 其 他 类 型 的 内 容 〈 如 数据 表格 、 视 频 等 ) 也 是 允 
许 的 。figcaption 元 素 并 不 是 必需 的 ， 但 如 果 包 含 它 ， 它 就 必须 是 figure 元 素 内 典 的 第 一 个 或 最 后 一 
个 元 素 。 除 了 在 现代 浏览 器 中 从 新 的 一 行 开始 显示 ，figure 没有 默认 样式 。 


< 注意 : figure 元 素 并 不 一 定 要 包含 在 article 里 ， 但 在 大 多 数 情况 下 这 样 做 比较 合适 。 


通常 ，figure 是 引用 它 的 内 容 的 一 部 分 ， 但 它 也 可 以 位 于 页 面 的 其 他 部 分 ， 或 位 于 其 他 页 面 《 如 
附录 )。 

【示例 】 在 下 面 示例 中 ， 包 含 图 表 及 其 标题 的 figure 出 现在 article 文本 中 间 。 图 以 缩 进 的 形式 显 
| 示 ， 这 是 浏览 器 的 默认 样式 ， 如 图 5.2 所 示 。 


| <article> 

<hl>2017 年 12 月 ， 全 球 PC 浏览 器 市 场 份额 排行 榜 </h1> 

<p> 第 1 名 : Google 的 Chrome 浏览 器 ， 其 全 球 市 场 份额 为 64.72%; ”</p> 
| <p> 第 2 名 : Mozilla Firefox， 其 市 场 份额 为 12.21%; </p> 

| <p> 第 3 名 : 微软 的 正 浏览 器 ， 其 市 场 份额 为 7.71%; </p> 

<p> 第 4 名 : 苹果 的 Safari 浏览 器 ， 其 市 场 份额 为 6.29%; </p> 

<p> 第 5 名 : 微软 的 Edge 浏览 器 ， 其 市 场 份额 为 4.18%; </p> 

<p> 第 6 名 : Opera 浏览 器 ， 其 市 场 份额 为 2.31%; </p> 

<p> 其 他 浏览 器 的 市 场 份额 合计 为 2.58%。 </p> 

| <figure> 

| <figcaption><b>12 月 份 <b> 全 球 浏览 器 市 场 份额 </figcaption> 

| <img src="images/111.png" width="300" /> </figure> 
| <p> 数 据 来 源 : StatCounter-Desktop Browsers</p> 

| </article> 


figure 元 素 可 以 包含 多 个 内 容 块 ,不 过 要 记 住 ,不 管 figure 里 有 多 少 内 容 ,只 允许 有 一 个 figcaption。 


= 


aside 元 素 。 要 了 解 如 何 结合 使 用 blockquote 和 figure 元 素 。 
可 选 的 figcaption 必须 与 其 他 内 容 一 起 包含 在 figure 里 面 ， 不 能 单独 出 现在 其 他 位 置 。figcaption 
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中 的 文本 是 对 内 容 的 一 句 简短 描述 即 可 ， 就 像 照 片 的 描述 文本 。 


2017 年 12 月 ， 全 球 PC 浏 览 器 市 场 份额 排行 榜 | 会 内 
第 ! 名 ，Google 的 Chrome 浏 览 器 ， 其 全 球 市 场 份 额 为 64.7296 | ~ 
: Mozilla Firefox， 其 市 场 份额 为 1221%%; ‘Note 
:微软 的 下 浏览 器 ， 其 市 场 份额 为 77196; 
:苹果 的 Safari 浏 览 器 ， 其 市 场 份额 为 6.29%6; 
， 微软 的 Edge 浏 览 器 ， 其 市 场 份额 为 4189%; 


+， Opera 浏 览 器 ， 其 市 场 份额 为 23196; 


其 他 浏览 器 的 市 场 份额 合计 为 258%。 


12 月 份 全 球 浏览 器 市 场 份额 
12 月 全 球 PC 便 曝 基 市 场 价 是 排行 榜 


| 
Wi 


数据 来 源 ，StatCounter-Desktop Browsers 


图 5.2 流 内 容 显示 效果 | 


现代 浏览 器 在 默认 情况 下 会 为 figure 添加 40 像素 宽 的 左右 外 边 距 。 可 以 使 用 CSS 的 margin-left | 
和 margin-right 属性 修改 这 一 样式 。 例 如 ， 使 用 “margin-left:0;” 让 图 直接 移 到 页 面 左 边缘 。 还 可 以 使 | 
用 figure {float: left} 让 包含 figure 的 文本 环绕 在 它 周围 ， 这 样 文本 就 会 围 在 图 的 右 侧 。 可 能 还 需要 为 | 
figure 设置 width， 使 之 不 至 于 占据 太 大 的 水 平 空 间 。 


5.2.3 ”插入 图 标 | 


| 

网 站 图 标 一 般 显示 在 浏览 器 选项 卡 、 历 史记 录 、 书 签 、 收 藏 夹 或 地 址 栏 中 。 图 标 大 小 一 般 为 16 | 
像素 x16 像素 ， 透 明 背 景 。 移 动 设备 图 标 大 小 : iPhone 图 标 大 小 为 57 像素 x57 像素 或 114 像素 x114 | 
像素 (Retina 屏 )，iPad 图 标 大 小 为 72 像素 x72 像素 或 144 像素 x144 像素 (Retina 屏 )。Android 系统 ， 
支持 该 尺寸 的 图 标 。 | 
【操作 步骤 】 | 

(1) 创建 大 小 为 16 像素 x16 像素 的 图 像 ， 保 存 为 favicon ico， 注 意 扩展 名 为 ico。 为 Retina 屏 创 | 

建 一 个 32 像素 x32 像素 的 图 像 。 | 
容 提示 : ico 文 件 多 许 在 同一 个 文件 中 包含 多 个 不 同 尺寸 的 同名 文件 | 
(2) 为 触 屏 设 备至 少 创建 一 个 图 像 ， 并 保存 为 PNG 格式 。 如 果 只 创建 了 一 个 ， 将 其 命名 为 | 
apple-touchicon png。 如 有 需要 ， 还 可 以 创建 其 他 的 触 屏 图 标 。 | 


(3) 将 图 标 图 像 放 在 网 站 根 目 录 。 
(4) 新 建 HTMLS5 文档 ， 在 网 页 头 部 位 置 输入 下 面 代码 。 


<link rel="icon" hre 人 ="/favicon.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 


(5) 浏览 网 页 ， 浏 览 器 会 自动 在 根 目录 寻找 这 些 特定 的 文件 名 ， 找 到 后 就 将 图 标 显示 出 来 。 L 
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， 次 提示 ， 如 采 浏 览 器 无 法 亚 示 ， 则 可 能 是 浏览 器 缓存 和 生成 图 标 慢 的 问题 ,学 试 清除 缓存 ， 或 者 先 
| 访问 图 标 : http://localhost/favicon.ico， 然 后 再 访问 网 站 ， 就 正常 显示 了 。 


| 5.2.4 定义 图 像 大 小 
1， 坦 看 图 像 大 小 


可 以 通过 浏览 器 或 图 像 编辑 软件 获取 图 像 的 精确 尺寸 
回 在 浏览 器 中 查看 图 像 尺寸 

”有 击 图 像 ， 在 弹出 的 快捷 菜单 中 选择 查看 图 像 信息 ， 具 体 

”选项 取决 于 所 使 用 的 浏览 器 ， 出 现 的 框 中 会 以 像素 为 单位 显示 

”图 像 的 尺寸 。 例 如 ， 在 正 浏览 器 中 选择 快捷 菜单 中 的 “属性 ”ww me 


天 ，。 机 月 


ATE5553361 3662803316afn=g1har=0 jp 


| 命令 ， 可 以 看 到 如 图 5.3 所 示 的 提示 对 话 框 。 和 
| 回 “在 Photoshop 中 查看 图 像 尺寸 。 天。 10368 这 
在 Photoshop 中 打开 图 像 ， 选 择 “图像 ” 一“ 图像 大 小 " 命 ”| 一 一 一 
| 令 ， 打 开 “ 图 像 大 小 ”对话 框 可 以 快速 了 解 图 像 的 尺寸 信息 。 pp 
”2. 设置 图 像 大 小 

在 img 标签 中 ， 使 用 width 和 height 属性 可 以 设置 图 像 大 小 ， 以 像素 为 单位 。 例 如 


<img sre="pic.gif" width="400" height="266" alt=" " /> 


| width 和 height 属性 不 一 定 要 反映 图 像 的 实际 尺寸 。 在 Retina 显示 屏 中 可 以 设置 height 和 width 
均 为 图 像 原来 大 小 的 一 半 ， 由 于 图 像 的 高 度 和 宽度 比例 保持 不 变 ， 图 像 就 不 会 失真 。 


。 这 提示 :在 相同 的 空间 里 ，Retina 显示 屏 衣 有 的 像素 数量 是 普通 显示 屏 的 像素 数量 的 4 售 ， 因 此 因 
| 像 会 更 锐利 。 


| 在 默认 情况 下 , 图 像 显 示 的 尺寸 是 HTML 中 指定 的 width 和 height 属性 值 。 如 果 不 指定 这 些 属性 
| 值 ， 图 像 就 会 自动 按照 其 原始 尺寸 显示 。 此 外 ， 可 以 通过 CSS 以 像素 为 单位 设置 width 和 height。 当 
| 屏幕 宽度 有 限 的 时 候 ， 使 用 可 伸缩 图 像 技 术 ， 可 以 让 图 像 在 可 用 空间 内 缩放 ， 但 不 会 超过 其 本 来 的 宽 
| 度 。 例 如 ， 为 图 像 添加 如 下 类 样式 : 
| .post-photo,.post-photo-full { 
max-width: 100%; 

} 
| 一 定 要 使 用 max-width: 100%， 而 不 是 width: 100%。width: 100% 会 让 图 像 尽 可 能 地 填充 容器 ， 如 
， 果 容器 的 宽度 比 图 像 宽 ， 图 像 就 会 放大 到 超过 其 本 来 尺寸 ， 显 得 较为 难看 。 上 面 样式 对 已 经 为 Retina 
| 显示 屏 扩大 到 双 倍 大 小 的 图 像 也 适用 。 


| 5.2.5 案例; 图 文 混 排 


| 在 网 页 中 经 常会 看 到 图 文 混 排 的 版 式 , 不 管 是 单 图 或 者 是 多 图 , 也 不 管 是 简单 的 文字 介绍 或 者 是 
| 大 段 正 文 ， 图 文 版 式 的 处 理 方式 也 很 简单 。 在 本 节 示例 中 所 展示 的 图 文 混 排 效 果 ， 主 要 是 文字 围绕 在 
， 图片 的 旁边 进行 显示 。 

【操作 步骤 】 

(1) 启动 Dreamweaver， 新 建 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 以 下 代码 。 
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<div class="pic_news"> | 
<h1> 雨 埠 <hl> 
<h2> 戴 望 舒 <h2> 
<p><img sre="images/1.jpg" alt="" /></p> 
<p> 撑 着 油纸 企 ， 独 自 
往 特 在 悠长 、 悠 长 
又 寂 密 的 雨 埠 ， 
我 希望 和 着 OU 
一 个 丁香 一 样 的 | 
结 着 悉 怨 的 姑娘 。 </p> | 
<p> 她 是 有 
丁香 一 样 的 颜色 ， | 


丁香 一 样 的 芬芳 ， 
丁香 一 样 的 忧愁 ， 
在 雨中 哀怨 ， 

衣 怨 又 簿 律 。 </p> 


<!-- 省 略 部 分 结构 雷同 的 文本 ， 请 参考 示例 源 代码 -> 

</div> | 
(2) 在 <head> 标 签 内 添加 <style type="textless'> 标 签 ,定义 一 个 内 部 样式 表 , 然后 输入 下 面 样式 ，， 
设置 图 片 的 属性 ， 将 其 控制 到 内 容 区 域 的 左上 角 。 


-pic_news { width: 800px; 庆 控制 内 容 区 域 的 宽度 ， 根 据 实际 情况 考虑 ， 也 可 以 不 需要 */ 
| 
.pic_news h2 { 让 定义 标题 样式 */ 
font-family: "隶书 "; font-size: 24px; 此 字体 样式 : 隶书 、 大 小 为 24 像素 */ 
text-align: right; 证 标题 二 居 右 显示 */ 
} 
Pic_news img { 庆 定义 图 片 样式 所 
float: left: 人 # 使 图 片 旁边 的 文字 产生 浮动 效果 */ 
margin-right: Spx; 上 # 增加 图 片 与 文字 的 间距 */ 
height: 250px: 让 控制 图 片 大 小 */ 


(3) 在 浏览 器 中 预览 效果 如 图 5.4 所 示 。 简 单 几 行 CSS 样式 代码 就 能 实现 图 文 混 排 的 页 面 效 果 ， 
其 中 重点 内 容 就 是 将 图 片 设置 浮动 ，float: left 就 是 将 图 片 向 左 浮动 。 


和 功 在 修长、 皮 长 和 办 而 春 ， 区 并 基 委 着 一 个 T 理 一样 的 外 


有 丁香 一 样 区 颜色 ， 丁香 一 样 的 芭 形 ， 丁香- 一样 的 优 匈 ， 在 雨中 京 乱 ， 京 她 只 


丙 意 ， 神 乔 愉 用 全， 保 我 一 样 ， 集 我 一 样 地 册 王 芭 诅 郑 稚 须 、 潜 


局 一 航 拆 隧 光 地 也 过 全 并 一 般 地 ， 保本 般 地 次 六 


和， 庆 吉 了 地 远 了 ， 示 了。 到 了 医 亿 的 乱 


在 两 的 京 由 里， 请 了 她 的 ， 基 至 昌 的 太 外 炬 的 蝇 光 丁香 般 的 得 kt. 
捍 乔 注 纸 中 ， 独自 访 得 在 允 长 、 和 长 又 和 更 的 两 卷 。 我 关 侣 骤 计 一 个 本 青 一 样 的 结 关 环 相 的 站 刍 - 


图 5.4 图 文 混 排 的 页 面 效果 | 


*。71 。 


ON 多 砚 计 设计 与 网 站 建设 从 入 门 到 精通 ( 微 课 精 编 版) 


| 


| 2 


5.3 使 用 多 媒体 插件 


在 HTML5 之 前 ， 可 以 通过 第 三 方 插件 为 网 页 添加 音频 和 视频 ， 但 这 样 做 有 一 些 问题 : 在 某 个 浏 
ELZ 览 器 中 嵌入 Flash 视频 的 代码 在 另 一 个 浏览 器 中 可 能 不 起 作用 , 也 没有 优雅 的 兼容 方式 。 同 时 , 像 Flash 
| 这 样 的 插件 会 占用 大 量 的 计算 资源 ， 使 浏览 器 会 变 慢 ， 影 响 用 户 体验 。 


5.3.1 使 用 embed 元 素 
<embed> 标 签 可 以 定义 嵌入 插件 ， 以 便 播 放 多 媒体 信息 ， 用 法 如 下 。 
<embed src="helloworld.swf" /> 
src 属性 必须 设置 ， 用 来 指定 媒体 源 。<embed> 标 签 包含 的 属性 说 明 如 表 5.1 所 示 。 
表 5.1 <embed> 标 签 属性 


属 性 描述 


height 设置 嵌入 内 容 的 高 度 
ste | wm | 嵌入 内 容 的 URL 


ype | we | 定义 嵌入 内 容 的 类 型 
width 设置 嵌入 内 容 的 宽度 


【示例 1】 设 计 背 景 音乐 。 打 开本 小 节 备用 练习 文档 testl.html， 另 存 为 test2.html。 在 <body> 标 
签 内 输入 下 面 代码 。 


<embed src="images/bg.mp3" width="307" height="32" hidden="true" autostart="true" loop="infinite"></embed> 
指定 背景 音乐 为 "images/bg.mp3"， 通 过 hidden="true" 属 性 隐藏 插件 显示 ， 使 用 autostart="true" 设 
置 背景 音乐 自动 播放 ， 使 用 loop="infinite" 设 置 背景 音乐 循环 播放 。 设 置 完毕 属性 ， 在 浏览 器 中 浏览 ， 
这 时 就 可 以 边 浏览 网 页 ， 边 听 着 背景 音乐 播放 的 小 夜曲 。 
启 提示 : 要 正确 使 用 需要 浏览 器 支持 对 应 的 插件 。 
【示例 2】 也 可 以 播放 视频 。 新 建 test3.html， 在 <body> 标 签 内 输入 下 面 代码 。 
<embed src="images/vid2.avi" width="413" height="292"></embed> 
使 用 width 和 height 属性 设置 视频 播放 窗口 的 大 小 ， 在 浏览 器 中 浏览 效果 如 图 5.5 所 示 。 


| 图 5.5 插入 视频 
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5.3.2 ”使 用 object 元 素 


使 用 <objecP> 标 签 可 以 定义 一 个 嵌入 对 象 ， 主 要 用 于 在 网 页 中 插入 多 媒体 信息 ， 如 图 像 、 音 频 、 
视频 、Java applets、ActiveX、PDF 和 Flash。 
<objec 马 标签 包含 大 量 属性 ， 说 明 如 表 5.2 所 示 。 


表 5.2 ”<object> 标 签 属性 


描述 
定义 引用 对 象 数据 的 URL。 如 果 有 需要 对 象 处 理 的 数据 文件 , 要 用 data 属性 来 指 
定 这 些 数据 文件 

规定 对 象 所 属 的 一 个 或 多 个 表单 


【示例 1】 下 面 代码 使 用 <object> 标 签 在 页 面 中 嵌入 一 幅 图 片 ， 效 果 如 图 5.6 所 示 。 
‘<object width="100%" type="image/jpeg" data="images/1.jpg"></object> 


图 5.6 翌 入 图 片 
【示例 2】 下 面 代码 使 用 <object> 标 签 在 页 面 中 嵌入 网 页 ， 效 果 如 图 5.7 所 示 。 
‘<object type="text/html" height="100%" width="100%" data="https://www.baidu.com/"></object> 


«| [GEE IT TT Ep ” 


A 


间 ”hao123 地 图 天 WS 王 ld | 


Bai 合 理工 | 


图 5.7 嵌入 网 页 | 
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【示例 3】 下 面 代码 使 用 <objecf> 标 签 在 页 面 中 嵌入 音频 ， 效 果 如 图 5.8 所 示 。 


<object width="100%" classid="clsid:22D6F312-BOF6-11D0-94AB-0080C74C7E95"> 
<param name="AutoStart" value="1" /> 
<param name="FileName" value="images/bg.mp3" /> 

</object> 


图 5.8 播放 音频 


， 浴 提示 : <param> 标 签 必须 包含 在 <object> 标 签 内 ， 用 来 定义 识 入 对 象 的 配置 参数 ， 通 过 “名 / 值 ” 
| 对 属性 来 设置 ，name 属性 设置 配置 项 目 ，value 属性 设置 项 目 值 。 
object 功能 很 强大 ， 初 说 是 取代 img 和 applet 元 素 。 不 过 由 于 漏洞 以 及 缺乏 浏览 器 支持 ， 
并 未 完全 实现 ， 同 时 主流 浏览 器 都 使 用 不 同 的 代码 来 加 载 相 同 的 对 象 。 如 果 浏览 器 不 能 够 
显示 object 元 素 ， 就 会 执行 位 于 <object> 和 </object> 之 间 的 代码 ， 通 过 这 种 方式 ， 我 们 针 
对 不 同 的 浏览 器 谋 套 多 个 object 元 素 ， 或 者 谋 套 embed、img 等 元 素 。 


5.4 使 用 HTML5 多 媒体 


| HTML5 添加 了 原生 的 多 媒体 。 这 样 做 有 很 多 好 处 速度 更 快 (任何 浏览 器 原生 的 功能 势必 比 插 
| 件 要 快 一 些 )， 媒 体 播放 按钮 和 其 他 控件 内 置 到 浏览 器 ， 对 插件 的 依赖 极 大 地 降低 。 

| 现代 浏览 器 都 支持 HTML5 的 audio 元 素 和 video 元 素 ， 如 IE 9.0+、Firefox 3.5+、Opera 10.5+、 
| Chrome 3.0+、Safari 3.2+ 等 。 


5.4.1 使 用 audio 元 素 
<audio> 标 签 可 以 播放 声音 文件 或 音频 流 , 支持 Ogg Vorbis、 MP3、Wav 等 音频 格式 , 其 用 法 如 下 。 


<audio src="samplesong.mp3" controls="controls"></audio> 


其 中 ，sre 属性 用 于 指定 要 播放 的 声音 文件 ，controls 属性 用 于 设置 是 否 显示 工具 条 。<audio> 标 
签 可 用 的 属性 如 表 5.3 所 示 。 


表 5.3 <audio> 标 签 支持 属性 

| 属性 说 明 

如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 

controls 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 如 播放 按钮 

loop loop 如 果 出 现 该 属性 ， 则 每 当 音 频 结 束 时 重新 开始 播放 

如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 ， 如 果 使 用 "autoplay"， 
则 忽略 该 属性 

要 播放 的 音频 的 URL 


| preload preload 
| STC 
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这 提示 : 如 果 浏览 器 不 支持 <audio> 标 签 ， 可 以 在 <audio> 与 </audio> 标 识 符 之 间 谨 入 替换 的 HTML 
字符 囊 ， 这 样 旧 的 浏览 器 就 可 以 显示 这 些 信息 ， 例 如 : | 
<audio src=" test.mp3" controls="controls"> | p 
您 的 浏览 器 不 支持 audio 标签 。 | 全 
</audio> | 
赫 换 内 容 可 以 是 简单 的 提示 信息 ,也 可 以 是 一 些 备用 音频 插件 ,或 者 是 音频 文件 的 链接 等 。 其 [J29 
【示例 1】<audio> 标 签 可 以 包 豪 多 个 <source> 标 签 ， 用 来 导入 不 同 的 音频 文件 ， 浏 览 器 会 自动 选 
择 第 一 个 可 以 识别 的 格式 进行 播放 。 | 
<audio controls> 
<source sre="medias/test.ogg" type="audio/ogg"> 
<source src="medias/testmp3" type="audio/mpeg"> | 
<p> 你 的 浏览 器 不 支持 HTML5 audio， 你 可 以 <a hre 人 "piano mp3"> 下 载 音 频 文件 </a> (MP3, 13 ， 
MB)</p> | 
</audio> | 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 5.9 所 示 ， 这 个 audio 元 素 ( 含 默认 控件 集 ) 定义 
了 两 个 音频 源 文件 ， 一 个 编码 为 Ogg， 另 一 个 为 MP3。 完 整 的 过 程 同 指定 多 个 视频 源 文件 的 过 程 是 | 
一 样 的。 浏览 器 会 忽略 它 不 能 播放 的 ， 仅 播放 它 能 播放 的 。 | 
支持 Ogg 的 浏览 器 (如 Firefox) 会 加 载 piano.ogg。Chrome 同时 理解 Ogg 和 MP3， 但 是 会 加 载 
Ogg 文件 , 因为 在 audio 元 素 的 代码 中 , Ogg 文件 位 于 MP3 文件 之 前 。 不 支持 Ogg 格式 , 但 支持 MP3 | 
格式 的 浏览 器 (IE10) 会 加 载 testmp3， 旧 浏览 器 〈 如 IE8) 会 显示 备用 信息 。 | 
【补充 】 | 
<source> 标 签 可 以 为 <video> 和 <audio> 标 签 定义 多 媒体 资源 , 它 必须 包 里 在 <video> 或 <audio> 标 识 | 
符 内 。<source> 标 签 包含 3 个 可 用 属性 。 | 
回 “media: 定义 媒体 资源 的 类 型 。 
src: 定义 媒体 文件 的 URL。 | 
type: 定义 媒体 资源 的 MIME 类 型 。 如 果 媒 体 类 型 与 源 文件 不 匹配 , 浏览 器 可 能 会 拒绝 播放 。 
可 以 省 略 type 属性 ， 让 浏览 器 自动 检测 编码 方式 。 | 
为 了 兼容 不 同 浏览 器 ， 一 般 使 用 多 个 <source> 标 签 包含 多 种 媒体 资源 。 对 于 数据 源 ， 浏 览 器 会 按 
照 声明 顺序 进行 选择 ， 如 果 支 持 的 不 止 一 种 ， 那 么 浏览 器 会 优先 播放 位 置 靠 前 的 媒体 资源 。 数 据 源 列 | 
表 的 排放 顺序 应 按照 用 户 体验 由 高 到 低 ， 或 者 服务 器 消耗 由 低 到 高 列 出 。 | 
【示例 2】 下 面 示例 演示 了 如 何在 页 面 中 插入 背景 音乐 ， 在 <audio> 标 签 中 设置 autoplay 和 loop | 
属性 ， 详 细 代 码 如 下 所 示 。 | 
<audio autoplay loop> 
<source src="medias/test.ogg" type="audio/ogg"> 
<source src="medias/test.mp3" type="audio/mpeg"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 


5.4.2 ”使 用 video 元 素 


<video> 标 签 可 以 播放 视频 文件 或 视频 流 ， 支持 Ogg、MPEG4、WebM 等 视频 格式 ， 其 用 法 如 下 。 
<video src="samplemovie.mp4" controls="controls"></video> 
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| 其 中 ,sre 属性 用 于 指定 要 播放 的 视频 文件 ,controls 属性 用 于 提供 播放 、 暂 停 和 音量 控件 。<video> 
标签 可 用 的 属性 如 表 5.4 所 示 。 


pu 表 5.4 <video> 标 签 支持 属性 
天 | 属 性 | 什 描 述 
Note | autoplay autoplay | 如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 
controls controls 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 如 播放 按钮 
|， __height ixels 设置 视频 播放 器 的 高 度 
| loo] loo 如 果 出 现 该 属性 ， 则 当 媒 介 文件 完成 播放 后 再 次 开始 播放 
muted muted 设置 视频 的 音频 输出 应 该 被 静音 
| _ poster URL 设置 视频 下 载 时 显示 的 图 像 ， 或 者 在 用 户 单 击 播放 按钮 前 显示 的 图 像 


| a 全 如 果 出 现 该 属性 , 则 视频 在 页 面 加 载 时 进行 加 载 , 并 预备 播放 。 如 果 使 用 "autoplay"， 
Preloa Preloa 


则 忽略 该 属性 
sre ul 要 播放 的 视频 的 URL 
width Pixels 设置 视频 播放 器 的 宽度 


【补充 】 

HTMLS 的 <video> 标 签 支持 3 种 常用 的 视频 格式 ， 简 单 说 明 如 下 。 浏 览 器 支持 情况 : Safari 3+、 
Firefox 4+、Opera 10+、Chrome 3+、JIE 9+ 等 。 

回 0Ogg: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 

回 “MPEG4: 带 有 HH.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 。 

回 WebM: 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 


启 提 示 : 如 果 浏 览 器 不 支持 <video> 标 签 ， 可 以 在 <video> 与 <video> 标 识 符 之 间 谱 入 替换 的 HTML 
字符 串 ， 这 样 旧 的 浏览 器 就 可 以 显示 这 些 信息 ， 例 如 : 
<video src=" test.mp4" controls="controls"> 
您 的 浏览 器 不 支持 video 标签 。 
</video> 
【示例 1】 下 面 示例 使 用 <video> 标 签 在 页 面 中 嵌入 一 段 视频 ， 然 后 使 用 <source> 标 签 链接 不 同 的 
视频 文件 ， 浏 览 器 会 自己 选择 第 一 个 可 以 识别 的 格式 。 
<video controls> 
<source src="medias/trailer.ogg" type="video/ogg"> 
<source src="medias/trailer.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 video 标签 。 
</video > 
一 个 video 元 素 中 可 以 包含 任意 数量 的 source 元 素 ， 因 此 为 视频 定义 两 种 不 同 的 格式 是 相当 容易 
的 。 浏 览 器 会 加 载 第 一 个 它 支持 的 source 元 素 引 用 的 文件 格式 ， 并 忽略 其 他 来 源 。 
以 上 代码 在 Chrome 浏览 器 中 运行 ， 当 鼠标 指针 经 过 播放 画面 时 ， 可 以 看 到 出 现 一 个 比较 简单 的 
视频 播放 控制 条 ， 包 含 了 播放 、 和 暂停 、 位 置 、 时 间 显 示 、 音 量 控制 等 控件 ， 如 图 5.9 所 示 。 
为 <video> 标 签 设置 controls 属性 ， 可 以 在 页 面 上 以 默认 方式 进行 播放 控制 。 如 果 不 设置 controls 
属性 ， 那 么 在 播放 时 就 不 会 显示 控制 条 界面 。 
【示例 2】 通 过 设置 autoplay 属性 ， 不 需要 播放 控制 条 ， 音 频 或 视频 文件 就 会 在 加 载 完成 后 自动 
播放 。 
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vy | 
Ss | 
<video autoplay> | 
<source src="medias/trailer.ogg" type="video/ogg"> | 


<source src="medias/trailer.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 video 标签 。 


</video > | 时 


er orn Er | Note 


图 5.9 播放 视频 


也 可 以 使 用 JavaScript 脚本 控制 媒体 播放 ， 简 单 说 明 如 下 。 
回 load0: 可 以 加 载 音频 或 者 视频 文件 。 
回 play0: 可 以 加 载 并 播放 音频 或 视频 文件 ， 除 非 已 经 暂停 ， 否 则 默认 从 开头 播放 。 
回 pause0: 暂停 处 于 播放 状态 的 音频 或 视频 文件 。 
加 ”canPlayType(type): 检测 video 元 素 是 否 支 持 给 定 MIME 类 型 的 文件 。 | 
【示例 3】 下 面 示例 演示 如 何 通过 移动 鼠标 指针 来 触发 视频 的 play 和 pause 功能 。 设 计 当 用 户 移 | 
动 鼠 标 指针 到 视频 界面 上 时 ， 播 放 视频 ， 如 果 移 出 鼠标 指针 ， 则 和 暂停 视频 播放 。 | 
<video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true" 
width="400px" height="300px"> 
<source src="medias/trailer.ogv" type='video/ogg; codecs="theora, vorbis"> 


<source src="medias/trailer.mp4" type='video/mp4> 
</video> 


上 面 代码 在 浏览 器 中 预览 ， 显 示 效果 如 图 5.10 所 示 。 


€ » ET ET 


图 5.10 使 用 鼠标 控制 视频 播放 | 
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， 次 提示 : 要 实现 循环 播放 ， 只 需要 使 用 autoplay 和 loop 属性 。 如 果 不 设置 autoplay 属性 ， 通 常 济 


览 器 会 在 视频 加 载 时 显示 视频 的 第 一 帧 ， 用 户 可 能 想 对 此 做 出 修改 ， 指 定 自己 的 图 像 。 这 
可 以 通过 海报 图 像 实现 。 
例如 ， 下 面 代 码 设置 自动 播放 和 循环 播放 的 单个 WebM 视频 。 如 果 这 里 不 设置 controls， 访 问 者 


。 就 无 法 停止 视频 。 因 此 ， 如 果 将 视频 指定 为 循环 ， 最 好 包含 controls。 


i 
下 面 代码 指定 了 海报 图 像 ( 当 页 面 加 载 并 显示 视频 时 显示 该 图 像 ) 的 单个 WebM 视频 ( 含 控件 )。 
i 
其 中 ，paddle-steamer.webm 指向 你 的 视频 文件 ，paddle-steamer-poster.jpg 是 想 用 作 海 报 图 像 的 


如 果 用 户 观看 视频 的 可 能 性 较 低 〈 如 该 视频 并 不 是 页 面 的 主要 内 容 )， 那 么 可 以 告诉 浏览 器 不 要 


| 预先 加 载 该 视频 。 对 于 设置 了 preload="none" 的 视频 ， 在 初始 化 视频 之 前 ， 浏 览 器 显示 视频 的 方式 并 
| 不 一 样 。 


<video src="paddle-steamer.webm" preload="none" controls></video> 
上 面 代码 在 页 面 完 全 加 载 时 也 不 会 加 载 单个 WebM 视频 。 仅 在 用 户 试 着 播放 该 视频 时 才 会 加 载 


| 它 。 注 意 这 里 省 略 了 width 和 height 属性 。 


在 Firefox 浏览 器 中 将 preload 设 为 none 的 视频 ， 什 么 也 不 会 显示 ， 因 为 浏览 器 没有 得 到 关于 该 


”视频 的 任何 信息 〔 连 尺寸 都 不 知道 )， 也 没有 指定 海报 图 像 。 如 果 用 户 播放 视频 ， 浏 览 器 会 获取 视频 
”的 尺寸 ， 并 调整 视频 大 小 。 


Chrome 在 控制 组 件 上 面 显示 一 个 空白 的 矩形 。 这 时 ， 控 制 组 件 的 大 小 比 访问 者 播放 视频 时 显示 


的 组 件 要 窜 一 些 。 


preload 的 默认 值 是 auto。 这 会 让 浏览 器 具有 用 户 将 要 播放 该 视频 的 预期 ， 从 而 做 好 准备 ， 让 视 


频 可 以 很 快 进 入 播放 状态 。 浏 览 器 会 预先 加 载 大 部 分 视频 甚至 整个 视频 。 因 此 ， 在 视频 播放 的 过 程 中 
| 对 其 进行 多 次 开始 、 暂 停 的 操作 会 变 得 更 不 容易 , 因为 浏览 器 总 是 试 着 下 载 较 多 的 数据 让 访问 者 观看 。 


在 none 和 auto 之 间 有 一 个 不 错 的 中 间 值 ， 即 preload="metadata"。 这 样 做 会 让 浏览 器 仅 获取 视频 


的 基本 信息 ， 如 尺寸 、 时 长 甚至 一 些 关键 的 帧 。 在 开始 播放 之 前 ， 浏 览 器 不 会 显示 白色 的 矩形 ， 而 且 
| 视频 的 尺寸 也 会 与 实际 尺寸 一 致 。 


使 用 metadata 会 告诉 浏览 器 , 用 户 的 连接 速度 并 不 快 , 因此 需要 在 不 妨碍 播放 的 情况 下 尽 可 能 地 


保留 带宽 资源 。 
人) 注意 ， 如果 要 获得 所 有 兼容 HTMLS 的 浏览 器 的 支持 ， 至 少 需要 提供 两 种 格式 的 视频 : MP4 和 


WebM。 这 时 就 要 用 到 HTMLS5 的 source 元 素 。 通常 ，source 元 素 用 于 定义 一 个 以 上 的 媒 
体 元 素 的 来 源 。 例 如 ， 下 面 代码 为 视频 定义 了 两 个 源 文件 : 一 个 MP4 文件 和 一 个 WebM 
Se 
<video width="369" height="208" controls> 

<source src="paddle-steamer.mp4" type="video/mp4"> 

<source src="paddle-steamer.webm" type="video/webm"> 

<p><a hre 仁 "paddle-steamer.mp4"> 下 载 视频 </a></p> 
</video> 
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可 以 在 www.bigbuckbunny.org/index.php/download/ 网 站 上 找到 一 些 免 费 的 视频 ， 用 于 试验 video 
和 source 元 素 。 该 网 站 没有 WebM 格式 的 视频 ， 不 过 可 以 通过 在 线 工 具 进 行 格式 转换 。 | 
【补充 】 | 

利用 现代 浏览 器 提供 的 原生 可 访问 性 支持 , 原生 多 媒体 可 以 更 好 地 使 用 键盘 进行 控制 , 这 是 原生 | 
多 媒体 的 另 一 个 好 处 。HTML5 视频 和 音频 的 键盘 可 访问 性 支持 在 Firefox、Internet Explorer 和 Opera | 
浏览 器 中 表现 良好 。 不 过 对 于 Chrome 和 Safari 浏览 器 ， 实 现 键 盘 可 访问 性 的 唯一 办 法 是 自制 播放 控 其 A[2293 
件 。 为 此 ， 需 要 使 用 JavaScript Media API (这 也 是 HTMLS 的 一 部 分 )。 

HTMLS 还 指定 了 一 种 新 的 文件 格式 WebVTT (Web Video Text Track，Web 视频 文本 轨道 ) 用 于 
包含 文本 字幕 、 标 题 、 描 述 、 篇 章 等 视频 内 容 。 更 多 信息 可 以 参见 www:iandevlin.comy/blog/2011/05/ | 
html5/webvttrand-video-subtitles， 其 中 包括 为 了 对 接 规范 修改 在 2012 年 进行 的 更 新 。 


5.5 案例 实战 


本 节 将 通过 多 个 案例 练习 如 何 使 用 图 像 标 签 ， 如 何 灵活 使 用 JavaScript 脚本 控制 HTML5 多 媒体 
播放 。 注 意 ， 在 学 习 之 前 ， 读 者 应 该 有 一 定 的 CSS 和 JavaScript 基础 。 | 


5.5.1 设计 音乐 播放 器 


如 果 需 要 在 页 面 上 播放 一 段 音频 , 同时 又 不 想 被 默认 的 控制 界面 影响 显示 效果 ， 则 可 创建 一 个 隐 | 视频 讲解 
藏 的 audio 元 素 ， 即 不 设置 controls 属性 ， 或 将 其 设置 为 false， 然 后 用 自 定 义 控制 界面 控制 音频 的 播 
放 。 本 例 主要 代码 如 下 ， 演 示 效 果 如 图 5.11 所 示 。 


<style type="text/css"> 
body { background:url(images/bg.jpg) no-repeat:} 
#toggle { position: absolute; left: 93px: top: 396px:} 
</style> 
<audio id="music"> 
<source src="medias/wlh.ogg"> 
<source sre="medias/wlh.mp3"> 
</audio> 
<button id="toggle" onclick="toggleSound0"> 播 放 </button> 
<script type="text/javascript"> 
function toggleSound() { 
var music = document.getElementById("music"): 
var toggle = document.getElementById("toggle"); 
if (music.paused) { 


music.play©O; | 
toggle.innerHTML = "暂停 "; | 

yelse { | 
music.pause(); | 
toggle.innerHTML "播放 "; | 

} | 

} 
</script> | 
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| 


天 之 后 的 我 好 了 一 些 


图 5.11 用 脚本 控制 音乐 播放 


| 在 上 面 示例 中 ， 先 隐藏 了 用 户 控制 界面 ， 也 没有 将 其 设置 为 加 载 后 自动 播放 ， 而 是 创建 了 一 个 具 
| 有 切换 功能 的 按钮 ， 以 脚本 的 方式 控制 音频 播放 。 


<button id="toggle" onclick="toggleSound()"> 播 放 </button> 


| 按钮 在 初始 化 时 会 提示 用 户 单 击 它 以 播放 音频 。 每 次 单 击 时 ， 都 会 触发 toggieSound0 函 数 。 在 
| toggleSound0 函 数 中 ， 首 先 访问 DOM 中 的 audio 元 素 和 button 元 素 。 


function toggleSound() { 
Var music = document.getElementById("music"); 
var toggle = document.getElementById("toggle"); 
if (music.paused) { 
music.play(); 
toggle.innerHTML = "暂停 "; 


上 
} 

| 通过 访问 audio 元 素 的 paused 属性 , 可 以 检测 到 用 户 是 否 已 经 暂停 播放 。 如 果 音 频 还 没 开 始 播放 ， 
| 那么 paused 属性 默认 值 为 tue， 这 种 情况 在 用 户 第 一 次 单 击 按钮 时 遇 到 。 此 时 ， 需 要 调用 play0 函 数 
| 播放 音频 ， 同 时 修改 按钮 上 的 文字 ， 提 示 再 次 单 击 就 会 暂停 。 
| else { 

music.pause(); 

toggle.innerHTML =" 播 放 "; 
| 
相反 ， 如 果 音 频 没有 暂停 ， 则 会 使 用 pause() 函 数 将 它 暂 停 ， 然 后 更 新 按钮 上 的 文字 为 “播放 ”， 
| 让 用 户 知道 下 次 单 击 时 音频 将 继续 播放 。 


5.5.2 ”设计 视频 播放 器 


四 | 本 例 将 设计 一 个 视频 播放 器 ， 用 到 HIML5 提供 的 video 元 素 ， 以 及 HIMLS 提供 的 多 媒体 API 
和 | 的 扩展 ， 示 例 演 示 效果 如 图 5.12 所 示 。 
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| S/ocahost: eftesVinde ~ B80¢| Socatost 


视频 播放 器 


| vote 


图 5.12 设计 视频 播放 器 


使 用 JavaScript 控制 播放 控件 的 行为 〈 自 定义 播放 控件 )， 实 现 如 下 功能 。 


利用 HIML+CSS 制作 一 个 自己 的 播放 控件 条 ， 然 后 定 
视频 加 载 loading 效果 。 
播放 、 和 暂 人 
总 时 长 和 当前 播放 时 长 显示 。 
播放 进度 条 。 
全 屏 显示 。 
【操作 步骤 】 
(1) 设计 播放 控件 。 
<figure> 
<figcaption> 视 频 播 放 器 </figcaption> 
<div class="player"> 
<video sre="./video/mv.mp4"></video> 
<div class="controls"> 
<!-- 播放 /暂停 
<a href="javascript:;" class="switch fa fa-play"></a> 
<!-- 全 屏 --> 


<a href="javascript:;" class="expand fa fa-expand"></a> 
<!-- 进度 条 -> 
<div class="progress"> 
<div class="loaded"></div> 
<div class="line"></div> 
<div class="bar"></div> 
</div> 
<!-- 时 间 --> 
<div class="timer"> 
<span class="current">00:00:00</span> / 
<span class="total">00:00:00</span> 


到 视频 最 下 方 。 


图 图 图 图 图 固 


</div> 
<!-- 声音 --> 
</div> 
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</div> 
</figure> 
上 面 是 全 部 HTML 代码 ，.controls 类 就 是 播放 控件 HTML， 引 用 CSS 外 部 样式 表 。 


<link rel="stylesheet" hre 舍 "css/font-awesome.css"> 
<link rel="stylesheet" href="css/player.css"> 


为 了 显示 播放 按钮 等 图 标 ， 本 例 使 用 了 字体 图 标 。 
| (2) 设计 视频 加 载 loading 效果 。 先 隐藏 视频 ， 用 一 个 背景 图 片 蔡 代 ， 等 视频 加 载 完 毕 之 后 ， 青 
显示 并 播放 视频 。 
.player { 


width: 720px; height: 360px:; 
margin: 0 auto; position: relative; 
background: #000 url(images/loading.gif) center/300px no-repeat; 


} 

video { 
display: none; margin: 0 auto; 
height: 100%; 

H 


(3) 设计 播放 功能 。 在 JavaScript 脚本 中 ， 先 获取 要 用 到 的 DOM 元 素 。 


Var Video = document.querySelector("video"): 

Var isPlay = document.querySelector(".switch"); 

var expand = document.querySelector(".expand'"): 

Var progress = document.querySelector(".progress"); 

var loaded = document.querySelector(".progress > .loaded"); 

var currPlayTime = document.querySelector(".timer > .current"); 
var totalTime = document.querySelector(" .timer > .total"); 


当 视频 可 以 播放 时 ， 显 示 视 频 。 


// 当 视 频 可 播放 时 
Video.oncanplay = function(){ 
/ 显示 视频 
this.style.display = "block": 
/ 显示 视频 总 时 长 
totalTime.innerHTML = getFormatTime(this.duration); 


}; 
(4) 设计 播放 、 和 暂停 按钮 。 当 单 击 播放 按钮 时 ， 显 示 和 暂停 图 标 ， 在 播放 和 暂停 状态 之 间 切 换 
图 标 。 

/ 播放 按钮 控制 
| isPlay.onclick = function() { 
| 这 videopaused) { 
| video.play0): 
| }else{ 
| Video.pause(); 
| } 
| this.classList.toggle("fa-pause"); 
| 昭 
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(5) 获取 并 显示 总 时 长 和 当前 播放 时 长 。 前 面 代码 中 其 实 已 经 设置 了 相关 代码 ， 此 时 只 需要 把 | 


获取 到 的 毫秒 数 转换 成 需要 的 时 间 格 式 即 可 。 先 定义 getFormatTime0 函 数 ， 用 于 转换 时 间 格 式 。 
function getFormatTime(time) { 


var time = time 0; | 估 站 
var h = parseInt(time/3600), | 
m= parseInt(time%3600/60), 

s = parseInt(time%60); | Note 
h=h<10?"0"+h :hb; | 
m=m<107"0"+m:m; | 
S==S< 10?"0"+s :S; 
return ht":"+mt+":"+s; 


} 
(6) 设计 播放 进度 条 。 
Video.ontimeupdate = function0){ 


var currTime = this.currentTime, / 当前 播放 时 间 
duration = this.duration; // 视频 总 时 长 

/ 百分比 

Var pre = currTime / duration * 100 + "%"; 

/ 显示 进度 条 


loaded.style.width = pre: 
/ 显示 当前 播放 进度 时 间 
currPlayTime.innerHTML = getFormatTime(currTime): 
a | 
这 样 即 可 实时 显示 进度 条 ， 此 时 ， 还 需要 单 击 进度 条 进行 跳跃 播放 ， 即 单 击 任意 时 间 点 视频 跳 转 | 
到 当前 时 间 点 播放 。 
1/ 跳跃 播放 
Pprogress.onclick = fonction(e){ 
Var event = e window.event:; 
Video.currentTime = (event.offsetX / this.offsetWidth) * video.duration; 
};; 
(7) 设计 全 屏 显示 。 这 个 功能 可 以 使 用 HTMLS5 提供 的 全 局 API: webkitRequestFullScreen 实现 ， 
与 video 元 素 无 关 ， 经 测试 在 Firefox、 正 浏览 器 下 全 屏 功 能 不 可 用 ， 仅 针对 webkit 内 核 浏 览 器 可 用 。 
1/ 全 屏 


expand.onclick = function(){ 
video.webkitRequestFullScreen(); 


La 


5.6 HTMLS 多 媒体 API 


使 用 HTMLS 原生 多 媒体 的 好 处 是 可 以 利用 很 多 来 自 HTMLS 或 与 HTMLS 相关 的 新 特性 和 新 功 | 
能 。 前提 是 读者 需要 有 一 定 的 JavaScript 基础 。 本 节 为 线 上 拓展 内 容 ， 介 绍 HIMLS 多 媒体 API 的 基础 
知识 和 应 用 ， 感 兴趣 的 读者 请 扫 码 阅读 。 


人 
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| 5.6.1 设置 属性 


| audio 和 video 元 素 拥有 相同 的 脚本 属性 ,关于 这 些 属性 的 简单 介绍 , 感 兴趣 的 同 
| 学 可 以 扫 码 学 习 。 


| 5.6.2 设置 方法 


| audio 和 video 元 素 拥 有 相同 的 脚本 方法 ， 关 于 这 些 方 法 的 简单 介绍 ， 
| 感 兴趣 的 同学 可 以 扫 码 学 习 。 


| 5.6.3 ”设置 事件 


| audio 和 video 元 素 支持 HTML5 的 媒体 事件 ， 使 用 JavaScript 脚本 可 ts . L 
| 以 捕 提 这 些 事件 并 对 其 进行 处 理 。 处 理 这 些 事件 一 般 有 两 种 方式 ， 感 兴趣 。 线 上 加 恋 视频 讲 
| 的 同学 可 以 扫 码 学 习 。 


5.6.4 “综合 案例 


| 本 节 通 过 一 个 综合 示例 整合 HTMLS 多 媒体 API 中 各 种 属性 、 方 法 
| 和 事件 ， 演 示 如 何在 一 个 视频 中 实现 对 这 些 信息 进行 访问 和 操控 ， 示 例 
| 效果 如 图 5.13 所 示 。 


HTML5 Web Video API 


loadedmetadata 1 loadeddate 1 


ne 
seeking 5 
paused 三 


played [object TimeRanges}| 
autoplay 加 


图 5.13 HTMLS5 多 媒体 API 接口 访问 
【操作 步骤 】 
| (1) 设计 文档 结构 。 整 个 结构 包含 3 部 分 : <video id='video> 视 频 播放 界面 、<div id='buttons> 
| 视频 控制 方法 集 、<div id="info"> 接 口 访问 信息 汇总 。 
| <hl>HTML5 Web Video API</h1> 
<div> 
<video id='video' controls preload='none' poster="video/trailer.png"> 
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<source id='mp4' src="video/trailer.mp4" type='video/mp4> 
<source id='webm' src="video/trailer.webm" type='video/webm'> 
<source 1d='0gv' src="video/trailer.ogv" type='video/ogg'’> 
<p> 你 的 浏览 器 不 支持 HTML5 video 元 素 。</p> 

</video> 

<div id=buttons> 
<button onclick="getVideo0.load0">load0</button> 


<table> 

<caption> 媒 体 事件 </caption> 

<tbody id='events> </tbody> 
</table> | 
<table> | 
<caption> 媒 体 属性 </caption> | 


<div id="info"> | 


<tbody id='properties></tbody> 
</table> 
<table id='canPlayType> | 
<caption> 播 放 类 型 </caption> | 
<tbody id='m_ video></tbody> | 
</table> | 
<table id='tracks> 
<caption> 轨 道 </caption> 
<tbody> 
<tr><th>Audio</th><th>Video</th><th>Text</th></tr> 
<tr><td id='m audiotracks' class='false’>?</td><td id='"m videotracks' class='false'’>?</td> <td 
id='m texttracks' class='false'’>?</td></tr> 
</tbody> 
</table> | 
</div> 
</div> | 


(2) 初始 化 多 媒体 事件 和 属性 数据 。 
// 初 始 化 事件 类 型 | 


var media_events = new Array(); 
media_events["loadstart"] = 0; | 
media_events["progress"] = 0; 
media_events["suspend"] = 0; 
media_events["abort"] = 0; 
media_events["error"] = 0; 
media_events["emptied"] = 0: 
media_events["stalled"] = 0; 
media_events["loadedmetadata"] = 0; 
media_events["loadeddata"] = 0; 
media_events["canplay"] = 0; 
media_events["canplaythrough"] = 0: 
media_events["playing"] = 0: 
media_events["waiting"] = 0; 
media_events["seeking"] = 0; 
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media_events["seeked"] = 0; 
media_events["ended"] = 0; 
media_events["durationchange"] = 0; 
media_events["timeupdate"] = 0; 
media_events["play"] = 0; 
media_events["pause"] = 0; 
media_events["ratechange"] = 0; 
media_events["resize"] = 0; 
media_events["volumechange"] = 0; 
// 在 数组 中 汇集 多 媒体 属性 


Var media properties = [ "error", "sre", "srcObject", "currentSre", "crossOrigin", "networkState", "preload", 
"buffered", "readyState", "seeking", "currentTime", "duration","paused", "defaultPlaybackRate", "playbackRate", 
"played", "seekable", "ended", "autoplay", "loop", "controls", "volume","muted", "defaultMuted", "audioTracks", 


"videoTracks", "textTracks", "width", "height", "videoWidth", "videoHeight", "poster" ]; 


(3) 初始 化 事件 函数 ， 在 该 函数 中 根据 初始 化 的 多 媒体 事件 数组 media_events， 逐 一 读 取 每 一 
个 元 素 所 存储 的 事件 类 型 ， 然 后 为 播放 的 视频 对 象 绑 定 事件 。 同 时 使 用 for 语句 把 每 个 事件 的 当前 状 


态 值 汇集 并 显示 在 页 面 表格 中 ， 如 图 5.13 所 示 。 


function init_events(id, arrayEventDef) { 
varf: 
for (key in arrayEventDef) { 
document. video.addEventListener(key, capture, false); 
) 
var tbody = document.getElementById(id); 
vari= 1; 
var tr= null; 
for (key in arrayEventDef) { 
if(ttr=—=nul)tr = document.createElement("tr"); 
Var th = document.createElement("th"); 
th.textContent = key; 
var td = document.createElement("td"); 
td.setAttribute("id", "e_" + key); 
td.textContent = "0"; 
td.className = "false"; 
tr.appendChild(th); 
tr.appendChild(td); 
让 (it+%5) 一 0){ 
tbody.appendChild(tr); 
tr= null; 
} 
b 
让 (tr := null) tbody.appendChild(tr): 
} 


(4) 初始 化 属性 函数 ， 在 该 函数 中 根据 初始 化 的 多 媒体 属性 数组 media_properties， 逐 一 读 取 每 


一 个 元 素 所 存储 的 属性 ， 然 后 使 用 do 语句 把 每 一 个 属性 值 显示 在 页 面 表格 中 ， 如 图 


function init_properties(id, arrayPropDef arrayProp) { 
var tbody = document.getElementById(id); 
vari= 0; 
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5.13 所 示 。 


第 宁 埋设 计 ITC5 图 依 和 多 粒 休 一 。 GZ3I | 
和 人 


var tr = null; 
dof{ | 
if(tt—nulD)tr = document.createElement("tr"); | 
var th = document.createElement("th"); 


th.textContent = arrayPropDeffi]: | 全 站 
var td = document.createElement("td"): | pe 


Mri vote 
td.setAttribute("id", "p_" + arrayPropDeffi]); | 


r=eval("document. video." + arrayPropDefTi]): 
td.textContent =1; 
if (typeof(r) != "undefined") { 
td.className = "true"; 
}else{ 
td.className = "false"; 
} 
tr.appendChild(th); 
tr.appendChild(td); 
arrayProp[i] = td; 
if((Hi%3)==0){ 
tbody.appendChild(tr); 
tr=null; 


} while (1 < arrayPropDef.length); 
if (tr != null) tbody.appendChild(tr); 
} 


(5) 定义 页 面 初始 化 函数 ， 在 该 函数 init0 中 ， 获 取 页 面 中 的 视频 播放 控件 ， 然 后 调用 init_events0 
和 init_properties0 〇 函数 ， 同 时 使 用 定时 器 ， 定 义 每 隔 250 毫秒 ， 将 调用 一 次 update_properties()， 该 函 | 
数 将 不 断 刷 新 多 媒体 属性 值 ， 并 动态 显示 出 来 。 
function initO { 
document. video = document.getElementById("video"); 
webm = document.getElementById("webm"); 
media_properties elts = new Array(media_properties.length); 
init_events("events", media_events); 
init_properties("properties", media_properties, media_properties_elts); 
init_mediatypes(); 
setInterval(update_properties, 250); 


5.7 在 线 练 习 


多 媒体 已 成 为 网 站 的 必 备 元 素 ， 使 用 多 媒体 可 以 丰富 网 站 的 效果 ， 丰 富 网 站 的 
容 ， 给 人 充实 的 视觉 体验 ， 体 现 网 站 的 个 性 化 服务 ， 吸 引用 户 的 回流 ， 突 出 网 站 的 如 
点 。 本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HIMLS 多 媒体 API 丰富 页 
信息 ， 感 兴趣 的 同学 可 以 扫 码 强化 学 习 。 在 线 练习 


二 


| 册 
1 旺 
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在 网 页 中 ， 大 部 分 信息 都 需要 列表 结构 来 进行 管理 ， 如 菜单 栏 、 图 文 列表 、 分 类 导航 、 
列表 页 、 栏 目 列表 等 。HTML5 定义 了 一 套 列 表 标 签 ， 通 过 列表 结构 实现 对 网 页 信息 的 合理 
排版 。 另 外 ， 网 页 中 还 会 包含 大量 链接 ， 通 过 它 实 现 页 面 或 位 置 跳 转 ， 最 终 把 整个 网 站 、 束 
个 互联 网 连 企 一 起 。 列 表 结 构 与 链接 关系 紧密 ， 因 此 本 章 将 对 这 两 类 对 象 进行 详细 讲解 . 


【 学 习 重 点 】 

创建 有 序列 表 和 无 序列 表 
设置 列表 编号 

定义 列表 样式 

定义 网 页 链接 
定义 锚 链 接 
定义 其 他 类 型 链接 


至 吾 吾 吾 吾 至 
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61 定义 列表 


| 全 四 
HTMLS5 支持 创建 普通 列表 、 编 号 列表 ， 以 及 描述 列表 等 ， 可 以 在 一 个 列表 中 嵌 套 另 一 个 或 多 个 ， 
列表 ， 下 面 将 详细 介绍 。 | Note 


6.1.1 无 序列 表 


二 
无 序列 表 是 一 种 不 分 排序 的 列表 结构 ， 使 用 <u> 标 答 定 义 ， 在 <u> 标 签 中 可 以 包含 多 个 < 标签 | 国 5 
定义 的 列表 项 目 。 | 视频 讲解 
【示例 1】 下 面 示 例 使 用 无 序列 表 定 义 一 元 二 次 方程 的 求解 方法 ， 预 览 效果 如 图 6.1 所 示 。 


<h1> 解 一 元 二 次 方程 </h1> 
<p> 一 元 二 次 方程 求解 有 四 种 方法 : </p> 
<u> 
<1i> 直 接 开 平方 法 </li> 
<H> 配 方法 </I> 
<li> 公 式 法 </l 放 
<] 记 分 解 因 式 法 </li> 
</ul> 


解 一 元 二 次 方程 


元 二 次 方程 求解 有 四 种 方法 ， 


图 6.1 定义 无 序列 表 


无 序列 表 可 以 分 为 一 级 无 序列 表 和 多 级 无 序列 表 , 一 级 无 序列 表 在 浏览 器 中 解析 后 ， 会 在 每 个 列 
表 项 目前 面 添 加 一 个 小 黑 点 的 修饰 符 ， 而 多 级 无 序列 表 则 会 根据 级 数 调整 列表 项 目 修饰 符 。 

【示例 2】 下 面 示例 在 页 面 中 设计 了 三 层 嵌 套 的 多 级 列表 结构 ， 浏 览 器 默认 解析 时 显示 效果 如 图 6.2 
所 示 。 


<u> 
<li> 一 级 列表 项 目 1 
<u> 
<li> 二 级 列表 项 目 1</li> 
<li> 二 级 列表 项 目 2 
<ul> 
<li> 三 级 列表 项 目 1</li> 
<1i> 三 级 列表 项 目 2</li> 
<lu> 
</> 
<Aul> 
</> 
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<1i> 一 级 列表 项 目 2</li> 


<ul> 
| 
ES 
| 
一 | 级 列表 项 目 1 
“| 一 和 列表 项 目 1 
三 级 列表 项 目 2 


级 列表 项 目 2 


| 
“| 二 级 列 表 项 目 2 
Note 三 级 列表 项 目 1 
| 
| 
! 
| 


图 6.2 多 级 无 序列 表 的 默认 解析 效果 


| 通过 观察 图 6.2， 可 以 发 现 无 序列 表 在 嵌 套 结构 中 随 着 其 所 包含 的 列表 级 数 的 增加 而 逐渐 缩 进 ， 
| 并且 随 着 列表 级 数 的 增加 而 改变 不 同 的 修饰 符 。 合 理 使 用 列表 结构 能 让 页 面 的 结构 更 加 清晰 。 


6.1.2 有 序列 表 


| 有 序列 表 是 一 种 在 意 排序 位 置 的 列表 结构 ， 使 用 <ol> 标 签 定义 ， 其 中 包含 多 个 <li> 列 表 项 目标 签 
| 构成 。 
一 般 网 页 设计 中 ， 列 表 结 构 可 以 互 用 有 序 或 无 序列 表 标 签 。 但 是 ， 在 强调 项 目 排序 的 栏目 中 ， 选 
| 用 有 序列 表 会 更 科学 ， 如 新 闻 列 表 (根据 新 闻 时 间 排序 )、 排 行 榜 (强调 项 目的 名 次 ) 等 。 
【示例 1】 列 表 结 构 在 网 页 中 比较 常见 ， 其 应 用 范畴 比较 宽泛 ， 可 以 是 新 闻 列表 、 产 品 列表 ， 也 
”可 以 是 导航 、 菜 单 、 图 表 等 。 下 面 示例 显示 3 种 列表 应 用 样式 ， 效 果 如 图 6.3 所 示 。 
| < 列表 应 用 <hl> 
<h2> 百 度 互联 网 新 闻 分 类 列表 </h2> 
<o> 
<] 记 网 友 热 论 网 络 文学 ， 渐 入 主流 还 是 刹那 流星 ? </li> 
<l 记 电信 封杀 路 由 器 ?消费 者 质疑 : 强迫 交易 </li> 
<] 记 大 学 生 创业 俱乐部 为 大 学 生 自主 创业 助力 </li> 


</o> 
<h2> 爆 机 产品 型 号 列表 </h2> 
<u> 
<l 记 直流 氢 弧 焊 机 系列 </li> 
<] 记 空气 等 离子 切割 机 系列 </li> 
<li> 氨 焊 / 手 弧 /切割 三 用 机 系列 <4i> 
</ul> 
<h2> 站 点 导航 菜单 列表 </h2> 
<u> 
<] 谊 微 博 </li> 
<]> 社 区 < 人 > 
<l 记 新 闻 </li> 
<ul> 
| 【示例 2】 有 序列 表 也 可 分 为 一 级 有 序列 表 和 多 级 有 序列 表 ， 浏 览 器 默认 解析 时 都 是 将 有 序列 表 
”以 阿拉 伯 数 字 表示 ， 并 增加 缩 进 ， 如 图 6.4 所 示 。 


<o> 
<1i> 一 级 列表 项 目 1 
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<ol> 
<1i> 二 级 列表 项 目 1</l> 
<1> 二 级 列表 项 目 2 
<ol> | | 
<li> 三 级 列表 项 目 1</li> | 0/ 
<I 三 级 列表 项 目 2<h> 全 -| 
</o> 
< 人 > Note 
</ol> 


</li> 
<H> 一 级 列表 项 目 2</li> 
</ol> 


加 .sweow- -ac|soonox 


列表 应 用 
百度 互联 网 新 闻 分 类 列表 
1 网 友 热 论 网 络 文学 ， 2 人 
2 电信 和 村 杀 路 由 器 ? 请 ps | 
3 主人 | 
焊 机 产品 于 号 列表 RO | rer | | 
入 1. 一 级 列表 项 目 1 | 
于 ti: 二 级 列表 项 目 1 | 
， 基 埋 / 手 弧 / 切 刘 三 用 机 系列 2. 二 级 列表 项 目 2 | 
Ne i 1. 三 级 列表 项 目 1 | 
站 点 导航 菜单 列表 2 三 级 列表 项 目 2 | 
往生 2. 一 级 列表 项 目 2 | 
社区 | 
"新 闻 | 
图 6.3 列表 的 应 用 形式 图 6.4 多 级 有 序列 表 默 认 解析 效果 | 
6.1.3 ”项目 编号 | 


<ol> 标 签 包含 3 个 比较 实用 的 属性 ， 这 些 属性 同时 获得 HTML5 支持 ， 且 其 中 reversed 为 新 增 属 | 
性 。 具体 说 明 如 表 6.1 所 示 。<li> 标 签 也 包含 type 和 value 两 个 实用 属性 ， 其 中 value 可 以 设置 项 目 编 
号 的 值 。 


表 6.1 <ol> 标 签 属性 


属 性 取 值 说 了 明 
start 定义 有 序列 表 的 起 始 值 
ype 定义 在 列表 中 使 用 的 标记 类 型 


【示例 】 新 建 HTMLS5 文档 ， 输 入 下 面 代码 ， 设 计 一 个 有 序列 表 结构 。 
使 用 value 属性 可 以 对 某 个 列表 项 目的 编号 进行 修改 , 后 续 的 列表 项 目 会 相应 地 重新 编号 。 因此 ， | 
可 以 使 用 value 在 有 序列 表 中 指定 两 个 或 两 个 以 上 位 置 相同 的 编号 。 例 如 ， 在 分 数 排名 的 列表 中 ,通常 
该 列表 会 显示 为 1、2、3、4、5, 但 如 果 存 在 两 个 并 列 第 二 名 , 则 可 以 将 第 3 个 项 目 设置 为 <livalue="2">， | 
将 第 4 个 项 目 设置 为 <li value="4">， 这 时 列表 将 显示 为 1、2、2、4、5， 效 果 如 图 6.5 所 示 。 | 


<hl> 排 行 榜 </h1> 
<ol> | 


人 


reversed Teversed 定义 列表 顺序 为 降序 ， 如 9、8、7…… | 
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<li> 张 三 <span>100</span> </li> 
<]> 李 四 <span>98</span> </li> 
<li value="2"> 王 五 <span>98</span> </li> 
<li value="4"> 赵 六 <span>96.5</span> </li> 
<]> 侯 七 <span>94</span> </li> 

</o> 


E 
Oe eco -so] So | 


图 6.5 排名 列表 中 并 列 排名 的 效果 


| 次 提示 ，start 和 type 是 两 个 重要 的 属性 ， 建 议 苔 终 使 用 数字 。 即便 使 用 字母 或 罗马 数字 对 列表 进 


行 编号 ， 也 应 使 用 数字 ， 因 为 这 对 于 用 户 和 搜索 引擎 都 比较 友好 。 页 面 呈 现 效果 可 以 通过 
CSS 设计 预期 的 标记 样式 。 
下 面 代码 设计 有 序列 表 降序 显示 ， 序 列 的 起 始 值 为 5， 类 型 为 大 写 罗马 数字 。 


<ol type="I" start="5" reversed > 
<li>...</l> 
</ol> 


6.1.4 设计 CSS 样式 


用 户 也 可 以 使 用 CSS 设计 列表 样式 ， 通 过 背景 图 像 创建 自 定义 的 项 目 符号 类 型 。 
【操作 步骤 】 
(1) 在 目标 列表 或 列表 项 的 样式 规则 中 ， 输 入 下 面 样式 取消 默认 的 项 目 符号 。 


list-style: none; 
(2) 在 目标 列表 的 样式 中 ， 设 置 margin-left 或 padding-left 属性 ， 指 定 列表 项 目 缩 进 的 大 小 。 为 


| 了 在 不 同 的 浏览 器 上 实现 相似 的 效果 ， 通 常 需要 同时 设置 这 两 个 属性 。 
全 注意 : 如 果 为 内 容 设置 了 dirtl"， 那 么 就 应 该 设置 margin-tight 和 padding-tight 属性 。 


(3) 在 目标 列表 的 二 元 素 的 样式 中 定义 背景 图 像 ， 使 用 背景 图 像 模拟 项 目 符号 。 
background: url(image.gif ) repeattypehorizontal vertical: 
其 中 ，image.gif 是 要 作为 定制 标记 的 图 像 的 路 径 和 文件 名 ; repeat-type 是 no-repeat、repeat-x 和 


epeaty 中 的 一 种 ， 通 常设 为 no-repeat horizontal 和 vertical 值 表 示 列表 项 目 中 背景 图 像 的 位 置 。 


(4) 输入 “padding-leftvalue:”， 这 里 的 value 应 不 小 于 背景 图 像 的 宽度 ， 以 防 列表 项 目的 内 容 


覆盖 到 定制 标记 的 上 面 。 


完整 样式 代码 如 下 。 
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ut{ 证 取消 默认 标记 到 
list-style: none; 
已 删除 列表 项 的 缩 进 */ 


margin-left: 0; 
padding-left: 0; | 估 丰 
} | 
li{ 启 显示 定制 的 标记 */ TVpte 
background: url(images/checkmark.png) no-repeat 0 0; | 
} 


如 果 想 删除 列表 项 目的 缩 进 ， 应 该 将 margin-left 和 padding-left 都 设 为 0。 
闪 提示 : 也 可 以 使 用 list-style-image 设计 项 目 符号 ， 例 如 : 
Hi { list-style-image:url(image.png); } | 
因为 不 同 浏览 器 的 显示 效果 并 不 一 致 。 并 且 相 比 前 面 展示 的 背景 图 像 方法 ， 开发 者 更 难 控 
制图 像 标记 的 位 置 。 | 


6.1.5” 铸 套 列表 


嵌 套 列表 比较 常用 。 所 谓 嵌 套 列表 ， 就 是 在 一 个 列表 中 可 以 插入 另 一 个 列表 。 | 
有 序列 表 和 无 序列 表 都 可 以 创建 谋 套 列表 。 例如 , 使 用 有 序列 表 结 构 进行 嵌 套 , 创建 分 级 大 纲 ( 如 
目录 页 ); 使 用 无 序列 表 结构 创建 带子 菜单 的 导航 (如 多 级 菜单 )。 | 


< 注意 : 每 个 炭 套 的 中 都 包含 在 其 父 元 素 的 开始 标签 <li> 和 结束 标签 </li> 之 间 。 


【示例 】 新 建 HTMLS5 文档 ， 使 用 无 序列 表 构 建 导航 菜单 (<nav role="navigation"> )， 同 时 使 用 
两 个 嵌 套 的 无 序列 表 构 建 子 菜单 〈<ul class="subnav">)。 


<nav role="navigation"> 
<ul class="nav"> 
<li><a hre 伍 "#"> 首 页 </a></li> 
<li><a hre 伍 "#> 产 品 </a> 
<ul class="subnav"> 
<li><a hre 伍 "#"> 手 机 </a></li> 
<li><a hre 伍 "#"> 配 件 </a></li> 
</u> 
</i> 
<li><a hre 伍 "#"> 支 持 </a> 
<ul class="subnav"> 
<li><a hre 伍 "#"> 社 区 </a></li> 
<li><a hre 伍 "#"> 联 系 </a></li> 
</u> 
<> 
<li><a hre 伍 "#"> 关 于 </a></li> 
</ul> 
</nav> 


最 后 可 以 通过 CSS 让 导航 水 平 排列 ， 同 时 让 子 菜单 在 默认 情况 下 隐藏 起 来 ， 并 在 访问 者 激活 它 
们 时 显示 出 来 。 
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6.1.6 描述 列表 


| HTML 提供 了 专门 用 于 描述 成 组 的 名 称 或 术语 , 及 其 值 之 间 关 联 的 列表 类 型 .这 种 类 型 在 HTML5 
| 中 称 为 描述 列表 ， 在 HTML4 中 称 为 定义 列表 。 
| 描述 列表 是 一 种 特殊 的 列表 结构 ， 它 可 以 是 术语 和 定义 、 元 数据 主题 和 值 、 问 题 和 答案 ， 以 及 任 
何其 他 的 “名 / 值 ” 对 。 每 个 描述 列表 都 包含 在 <dj> 中 ， 其 中 每 个 “名 / 值 ” 对 都 有 一 个 或 多 个 <dt> 标 
| 签 (名 称 或 术语 )， 以 及 一 个 或 多 个 <dd> 标 签 ( 值 )。 
【示例 1】 下 面 示例 定义 了 一 个 中 药 词 条 列表 。 
<h2> 中 药 词 条 列表 </h2> 
<dl> 
<de> 丹 皮 </dt> 
| <dd> 为 毛 蔗 科 多 年 生 落 叶 小 灌木 植物 牡丹 的 根 皮 。 产 于 安徽 、 山 东 等 地 。 秋 季 采 收 ， 晒 干 。 生 用 或 炒 
| 用。</dd> 
</d> 
在 上 面 结 构 中 ,“ 丹 皮 ” 是 词 条 ， 而 “为 毛 葛 科 多 年 生 落 叶 小 灌木 植物 牡丹 的 根 皮 。 产 于 安徽 、 
山东 等 地 。 秋 季 采 收 ， 晒 干 。 生 用 或 炒 用 。” 是 对 词 条 进行 的 描述 (或 解释 )。 
【示例 2】 下 面 示 例 使 用 描述 列表 显示 两 个 成 语 的 解释 。 
<h1> 成 语词 条 列表 </h1> 
<dl> 
<dt> 知 无 不 言 ， 言 无 不 尽 </dt> 
<dd> 知 道 的 就 说 ， 要 说 就 毫 无 保留 。</dd> 
<dt> 智 者 千 虑 ， 必 有 一 失 </dt> 
<dd> 不 管 多 聪明 的 人 ， 在 很 多 次 的 考虑 中 ， 也 一 定 会 出 现 个 别 错误 。</dd> 
</d> 


次 提示 : 描述 列表 与 无 序列 表 和 有 序列 表 存 在 着 结构 上 的 差异 性 ， 相 同 点 就 是 ，HTML 结构 必须 
是 如 下 形式 。 


<dl> 
<de> 描 述 列表 标题 </df> 
<dd> 描 述 列表 内 容 </dd> 
</d> 


或 者 。 

<dl> 
<d 人 > 描述 列表 标题 1</dt> 
<dd> 描 述 列表 内 容 1.1</dd> 


<dd> 描 述 列表 内 容 1.2</dd> 
</d> 


也 可 以 是 如 下 多 个 组 合 形式 。 


<d> 

| <dt> 描 述 列表 标题 1</dt> 
| <dd> 描 述 列表 内 容 1</dd> 
| <dt> 描 述 列表 标题 2</dt> 

| <dd> 描 述 列表 内 容 2</dd> 
| </d> 
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【示例 3】 可 以 对 描述 列表 进行 谋 套 ， 并 通过 CSS 对 它们 添加 所 需 的 样式 。 在 默认 情况 下 ， 如 时 
一 个 第 嵌 套 在 另 一 个 由 中 ， 它 会 自动 进行 缩 进 ， 当 然 也 可 以 通过 CSS 对 此 进行 修改 。 | 


<h1> 标 题 说 明 </h1> g 
<d> 名 词 1</dt> 全 
<dd> 解 释 1</dd> 
es | Note 

<!-- 开始 嵌 套 列表 -> 
<d> 
<dt> 子 名 词 1</dt> 


<dd> 子 解释 1</dd> 


</d> 
<!-- 结束 嵌 套 列表 --> 
</dd> 
</d> 


输入 下 面 CSS 控制 样式 。 


<style type="text/css"> 
body { font-family: Verdana, Geneva, sans-serif: } 
hl { font-size: 1.75em; } 
dt{ 
font-weight: bold; 
text-transform: uppercase; 


) 为 位 于 另 一 个 中 的 任意 的 dt 设置 样式 */ 

dl dl dt { text-transform: none; } 

dd + dt { margin-top: lem; } 

</style> | 

对 主要 列表 中 的 术语 和 嵌 套 列表 中 的 术语 进行 区 分 ， 对 dt 元 素 使 用 了 大 写字 母 样式 ， 再 将 位 于 | 
嵌 套 dl 中 的 dt 元 素 重 新 设 为 常规 样式 (使 用 “text-transform: none:” 声 明 )。 不 过 ， 注 意 所 有 的 术语 
均 以 粗 体 显示 ， 这 是 因为 第 一 条 样式 规则 中 的 声明 适用 于 所 有 的 dt 元 素 ， Bt is 
式 中 清除 这 一 样式 ， 演 示 效 果 如 图 6.6 所 示 。 


C2) Blocatort x 


图 6.6 ”设计 媒 套 描述 列表 


在 默认 情况 下 ， 当 一 个 谋 套 在 另 一 个 dl 中 时 ， 赃 套 的 列表 会 自动 进行 缩 进 。 第 一 级 dt 人 
用 大 写字 母 ， 而 嵌 套 列表 中 的 dt 元 素 则 使 用 常规 样式 。 所 有 的 dt 元 素 均 以 粗 体 显示 。 
对 于 描述 〈 值 )， 浏 览 器 通常 会 在 其 术语 〈 名 称 ) 下 面 新 的 一 行 对 其 进行 缩 进 。 可 以 通过 自 定义 | 
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dd 元 素 的 margin-left 值 改变 缩 进 。 如 dd { margin-left: 0; } 会 将 描述 和 术语 左 对 齐 。 
人 注意 : 不 应 使 用 p 元 素 对 dd 元 素 中 的 单个 文本 段落 进行 标记 。 不 过 ， 如 果 单 个 档 述 是 由 一 个 以 
| 上 的 段落 构成 的 ， 就 应 该 在 一 个 dd 元 素 中 使 用 多 个 了 元 素 对 其 进行 标记 ， 而 不 是 将 每 个 
请- 段落 (不 使 用 pp 元素) 放 入 单独 的 dd. 


Note | 6.1.7 ”菜单 列表 


HTMLS 重新 定义 了 被 HTML4 弃 用 的 <menu> 标 签 。 使 用 <menu> 标 签 可 以 定义 命令 的 列表 或 菜 
单 ， 如 上 下 文 菜单 、 工 具 栏 ， 以 及 列 出 表单 控件 和 命令 。<menu> 标 签 中 可 以 包含 <command> 和 
| <menuitem> 标 签 ， 用 于 定义 命令 和 项 目 。 
| 【示例 1】 下 面 示例 配合 使 用 <menu> 和 <command> 标 签 ， 定 义 一 个 命令 ， 当 选择 该 命令 时 ， 将 
弹出 提示 对 话 框 ， 如 图 67 所 示 。 
| <menu> 

<command onclick="alert('Hello World)"> 命 令 </command> 
</menu> 


图 6.7 定义 菜单 命令 


| <command> 标 签 可 以 定义 命令 按钮 , 如 单 选 按钮 、 复 选 框 或 按钮 .只 有 当 command 元 素 位 于 menu 
| 元 素 内 时 ， 该 元 素 才 是 可 见 的 ， 否 则 不 会 显示 这 个 元 素 ， 但 是 可 以 用 它 定义 键盘 快捷 键 。 
目前 ， 只 有 下 9 (更 早 或 更 晚 的 版 本 都 不 支持 ) 和 最 新 版 本 的 Firefox 支持 <command> 标 签 。 
<command> 标 签 包含 很 多 属性 ， 专 门 用 来 定制 命令 的 显示 样式 和 行为 ， 说 明 如 表 6.2 所 示 。 


表 6.2 <command> 标 签 属性 


checked checked 定义 是 否 被 选中 。 仅 用 于 radio 或 checkbox 类 型 
disabled | disabled 定义 command 是 否 可 用 

icon [um 定义 作为 command 来 显示 的 图 像 的 url 

label | text 为 command 定义 可 见 的 label 

radiogroup | groupname 定义 command 所 属 的 组 名 。 仅 在 类 型 为 radio 时 使 用 


type 定义 该 command 的 类 型 。 默 认 值 为 "command" 
| 【示例 2】 下 面 示例 使 用 <command> 标 签 各 种 属性 定义 一 组 单 选 按钮 命令 组 ， 演 示 效 果 如 图 6.8 
| 所 示 。 目 前 还 没有 浏览 器 完全 支持 这 些 属性 。 


<menu> 
<command icon="images/1.png" onclick="alert(' 男 士 )" type="radio" radiogroup="group1" label=" 男 十 "> 男 


checkbox、command、radio 
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6.1.8 快捷 菜单 


目前 ， 仅 有 Firefox 8.0+ 版 本 浏览 器 支持 <menuitem> 标 签 。 


给 body 添加 一 个 Hello World 的 菜单 。 
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士 </command> 


<command icon="images/2.png" onclick="alert( 女 士 )" type="radio" radiogroup="group1" label=" 女 士 "> 女 | 
士 <command> | 


<command icon="images/3.png" oncjick="alert( 未 知 )" type="radio" radiogroup="groupl" label-" 未 知 "> 未 
知 </command> 


</menu> | 
<menu> 标 签 也 包含 两 个 专用 属性 ， 简 单 说 明 如 下 。 EE 
label: 定义 菜单 的 可 见 标签 。 | 
type: 定义 要 显示 哪 种 菜单 类 型 ， 取 值 说 明 如 下 。 
> list: 默认 值 ， 定 义 列表 菜单 。 一 个 用 户 可 执行 或 激活 的 命令 列表 〈1i 元 素 )。 
> context: 定义 上 下 文 菜单 。 该 菜单 必须 在 用 户 能 够 与 命令 进行 交互 之 前 被 激活 。 
> toolbar: 定义 工具 栏 菜单 。 活 动 式 命令 ， 人 允许 用 户 立 即 与 命令 进行 交互 。 
【示例 3】 下 面 示例 使 用 type 属性 定义 了 两 组 工具 条 按钮 ， 演 示 效 果 如 图 6.9 所 示 。 
<menu type="toolbar"> 
<li> 
<menu label="File" type="toolbar"> 
<button type="button" onclick="file new0"> 新 建 ...</button> 
<button type="button" onclick="file open0"> 打 开 .…</button> 
<button type="button" onclick="file save0"> 保 存 </button> 
</menu> 
</> 
<l> 
<menu label="Edit" type="toolbar"> 
<button type="button" onclick="edit_cut()"> 剪 切 </button> 
<button type="button" onclick="edit_copy0"> 复 制 </button> 
<button type="button" onclick="edit_pasteO"> 粘 贴 </button> 
</menu> 
</l> 
</menu> 


httpy/lecalhost/test3html x 


tr 
[eT 


© localhost/test3.html 


图 6.8 定义 单 选 按钮 命令 组 图 6.9 定义 工具 条 按钮 


<menuitem> 标 签 用 来 定义 菜单 项 目 ， 这 些 菜单 项 目 仅 用 作 弹 出 菜单 的 命令 ， 方 便 用 户 快捷 调用 。 


【示例 1】menu 和 menuitem 元 素 一 起 使 用 ， 将 把 新 的 菜单 合并 到 本 地 的 上 下 文 菜单 中 。 例 如 ， 
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<style type="text/css"> 
html, body { height:100%;} 
</style> 


全 站 <body contextmenu="new-context-menu"> 
| <menu id="new-context-menu" type="context"> 
<menuitem>Hello World</menuitem> 
| </menu> 
| 在 上 面 示例 代码 中 ， 包 含 的 基本 属性 有 id、type 和 contextmenu， 指 定 了 菜单 类 型 是 context， 同 
时 也 指定 了 新 的 菜单 项 应 该 被 显示 的 区 域 。 在 本 示例 中 ， 当 右 击 时 ， 新 的 菜单 项 将 出 现在 文档 的 任何 
| 地方， 效果 如 图 6.10 所 示 。 
| 【示例 2】 也 可 以 通过 在 特定 的 元 素 上 给 contextmenu 属性 赋值 ， 来 限制 新 菜单 项 的 作用 区 域 。 
| 下 面 示例 将 为 <h1> 标 签 绑 定 一 个 上 下 文 菜单 。 
| <hl contextmenu="new-context-menu"> 使 用 &lt;menuitem&gt; 标 签 设计 弹出 菜单 </h1> 
<menu id="new-context-menu" type="context"> 
<menuitem>Hello World</menuitem> 
</menu> 


当 在 Firefox 中 查看 时 ， 会 发 现 新 添加 的 菜单 项 被 添加 到 右键 快捷 菜单 最 顶部。 
| 【示例 3】 为 快捷 菜单 添加 子 菜单 和 图 标 。 子 菜单 由 一 组 相似 或 相互 的 菜单 项 组 成 。 下 面 示例 演 
| 示 如 何 使 用 menu 添加 4 个 子 菜单 ， 演 示 效果 如 图 6.11 所 示 。 


<img src="images/1.png" width="500" contextmenu="demo-image" /> 
<menu id="demo-image" type="context"> 
<menu label=" 旋 转 图 像 "> 
<menuitem> 旋 转 90 度 </menuitem> 
<menuitem> 旋 转 180 度 </menuitem> 
<menuitem> 水 平 翻转 </menuitem> 
<menuitem> 垂 直 翻 转 </menuitem> 
</menu> 
</menu> 


hatpWiecalhosytestahtnl 。 X 


hetp//localhosttestLhtml 闪 


9 colorzila 


名 Web Developer 
< 2 
各 人 Frebug 坦克 素 


图 6.10 为 body 添加 上 下 文 菜单 图 6.11 为 图 片 添加 子 菜单 项 目 
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<menuitem> 标 签 包含 很 多 属性 ， 具 体 说 明 如 表 6.3 所 示 。 
表 6.3 <menuitem> 标 签 属性 


属 性 什 描述 y 
定义 在 页 而 加 载 后 选中 命令/ 菜单 项 目 。 仅 适 用 于 yperadio 或 | 国王 
checked checked 
type="checkbox" 
dct | dbult 把 命令 / 荣 单 项 设置 为 默认 命令 Note 
disabled disabled 定义 命令 /菜单 项 应 该 被 禁用 | 
icon URL 定义 命令 /菜单 项 的 图 标 | 
open open 定义 details 是 否 可 见 | 
label text 必需 。 定 义 命令 /菜单 项 的 名 称 ， 以 向 用 户 显示 | 
定义 命令 组 的 名 称 ， 命 令 组 会 在 命令 /菜单 项 本 身 被 切换 时 进行 切 | 
Tadiogroup | groupname 换 。 仅 适用 于 type="radio" | 
e checkbox、command、 radio | 定义 命令 /菜单 项 的 类 型 


【示例 4】 下 面 示例 使 用 icon 属性 在 菜单 的 旁边 添加 图 标 ， 演 示 效 果 如 图 6.12 所 示 。 


<img src="images/1.png" width="500" contextmenu="demo-image" /> 
<menu id="demo-image" type="context"> 
<menu label=" 旋 转 图 像 "> 
<menuitem icon="images/icon1.png"> 旋 转 90 度 </menuitem> 
<menuitem icon="images/icon2.png"> 旋 转 180 度 </menuitem> 
<menuitem icon="images/icon4.png"> 水 平 翻转 </menuitem> | 
<menuitem icon="images/icon3.png"> 垂 直 翻转 <,menuitem> 
</menu> 
</menu> 


huapdflocalhorwacst hol x | 


图 6.12 为 菜单 项 目 添加 图 标 
< 抽 注意 : icon 属性 只 能 在 menuitem 元 素 中 使 用 。 


6.2 定义 链接 | 


每 个 网 页 都 只 能 独立 存在 ， 通 过 链接 可 以 把 所 有 网 页 连接 在 一 起 。 链 接 包括 两 部 分 : 链接 目标 和 L 
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链接 标签 。 目 标 通过 URL 定义 ， 指 定 访问 者 单 击 链接 时 会 发 生 什 么 ， 可 以 创建 链接 进入 另 一 个 页 面 ， 
| 在 页 面 内 跳 转 ， 显 示 图 像 ， 下 载 文件 等 。 标 签 就 是 访问 者 在 浏览 器 中 看 到 或 在 屏幕 阅读 器 中 听 到 的 部 
|， 分， 激活 标签 就 可 以 到 达 链 接 的 目标 。 

儒 -| 6.2.1 普通 链接 


创建 指向 另 一 个 网 页 的 链接 的 方法 如 下 。 
| <a href="page.html "> 标签 文本 </a> 
其 中 , page.html 是 目标 网 页 的 URL。 标签 文本 默认 突出 显示 , 访问 者 激活 它 时 ,就 会 转 到 page.html 


所 指向 的 页 面 。 
也 可 以 添加 一 个 img 元 素 蔡 代 文 本 或 同文 本 一 起 ) 作为 标签 ， 例 如 : 


<a href="page.html "><img sre="images/1.jpg" /></a> 

可 以 创建 指向 另 一 个 网 站 的 页 面 的 链接 ， 例 如 

<a href="http://www.w3school.com.cn" rel="external"> W3School</a> 

<a> 标 签 包含 众多 属性 ， 其 中 被 HTMLS5 支持 的 属性 如 表 6.4 所 示 。 
表 6.4 <a> 标 签 属性 


属 性 取 值 说 了 明 
download filename, 规定 被 下 载 的 链接 日 标 
href URL 规定 链接 指向 的 页 面 的 URL 
hreflang language_code 规定 被 链接 文档 的 语言 
media media_quel 规定 被 链接 文档 是 为 何 种 媒介 /设备 优化 的 
rel text 规定 当前 文档 与 被 链接 文档 之 间 的 关系 
target _blank、_parent、_self、_top、framename 规定 在 何 处 打开 链接 文档 
ype MIME type 规定 被 链接 文档 的 的 MIME 类 型 
| href 指 hypertext reference( 超 文本 引用 )。 通 常 ， 对 指向 站 内 网 页 的 链接 使 用 相对 URL， 对 指向 
| 其 他 网 站 页 面 的 链接 使 用 绝对 URL。 
| 仅 指定 路 径 ， 省 略 文件 名 ， 就 可 以 创建 指向 对 应 目录 下 默认 文件 〈 常 为 index.html) 的 链接 ， 
| 例如 : 
| www.site.com/directory/ 
如 果 连 路 径 也 省 略 ， 就 指向 网 站 的 默认 〈 首 ) 页 ， 例 如 : 
Www.site.com 


| rel 属性 是 可 选 的 ， 即 便 没有 它 ， 链 接 也 能 照常 工作 。 但 对 于 指向 另 一 网 站 的 链接 ， 推 荐 包含 这 
| 个 值 。 它 描述 包含 链接 的 页 面 和 链接 指向 的 页 面 之 间 的 关系 。 它 也 是 另 一 种 提升 HTML 语义 化 程度 
| 的 方式 。 搜索 引擎 也 会 利用 这 些 信息 。 此 外 ， 还 可 以 对 带 有 rel="extermal" 的 链接 添加 不 同 的 样式 ， 从 
而 告知 访问 者 这 是 一 个 指向 外 部 网 站 的 链接 。 

访问 者 将 鼠标 光标 移 到 指向 其 他 网 站 的 链接 上 时 ， 目 标 URL 会 出 现在 状态 栏 里 ，title 文字 (如 
， 果 指定 了 的 话 ) 也 会 显示 在 链接 旁边 。 

| 使 用 target 属性 可 以 设置 打开 目标 页 面 的 窗口 ， 如 target="window"， 其 中 window 是 应 该 显示 相 
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应 页 面 的 窗口 的 名 称 ， 例 如 : 
<a hre 全 "page.html" target="doodad"> 打 开 新 页 面 </a> 


上 面 代码 会 在 名 为 doodad 的 新 窗口 或 标签 页 中 打开 page html。 | 
如 果 让 多 个 链接 指向 同一 个 窗口 即使 用 同一 个 名 称 )， 链 接 将 都 在 同一 个 窗口 打开 。 或 者 ， 如 ， 

果 希 望 链 接 总 是 在 不 同 的 窗口 或 标签 页 打开 (即使 多 次 激活 同一 个 链接 )， 就 使 用 HTML 预定 义 的 名 国 V 可 

称 blank (target=" blank")， 例 如 : | 
href="page html" target=" DIS 打开 新 页 面 可 | 


不 过 不 推荐 这 样 做 ， 尽 量 避 免 。 | 
target 还 有 一 种 用 法 ， 就 是 在 过 ame 中 打开 链接 。 可 以 用 同样 的 方法 编写 target， 只 是 其 值 应 与 | 
iframe 的 id 值 对 应 。 | 


6.2.2 ” 块 链接 


HTMLS5 允许 在 链接 内 包含 任何 类 型 的 元 素 或 元 素 组 ， 如 段落 、 列 表 、 整 篇 文章 和 区 块 。 任 何 元 | 
素 都 行 ， 但 其 他 链接 、 音 频 、 视 频 、 表 单元 素 、ifame 等 交互 式 内 容 除 外 ， 这 些 元 素 大 部 分 为 块 级 元 ， 
素 。 使 用 HTML 验证 器 对 页 面 进行 测试 可 以 防止 链接 中 出 现 不 允许 包含 的 元 素 。 | 

【示例 】 下 面 示例 以 文章 的 一 小 段 内 容 为 链接 ， 指 向 完整 的 文章 。 如 果 想 让 这 一 小 段 内 容 和 提示 | 
都 形成 指向 完整 文章 页 面 的 链接 ， 就 应 使 用 块 链接 。 可 以 通过 CSS 让 部 分 文字 显示 下 画 线 ， 或 者 所 | 
有 的 文字 都 不 会 显示 下 画 线 。 

<a href="pages.html"> 

<h1> 标 题 文本 </h1> 
<p> 段 落 文本 </p> 
<p> 更 多 信息 </p> 

</a> 

块 链接 是 HTML5 同 HTML 早期 版 本 有 巨大 差异 的 地 方 。 在 以 前 的 HTML 中 ， 链 接 中 只 能 包含 
图 像 、 文 本 短语 ， 以 及 标记 文本 短语 的 元 素 ( 如 em、strong、cite 等 )。 

尽管 在 以 前 的 HTML 规范 中 块 链接 是 不 允许 的 ， 但 浏览 器 都 支持 。 这 意味 着 现在 就 可 以 使 用 它 
们 ， 而 且 它们 在 旧 的 浏览 器 和 现代 浏览 器 中 均 能 正常 工作 。 不 过 ， 使 用 它们 时 也 要 小 心 。 有 一 些 可 访 
问 性 方面 的 注意 事项 ， 特 别 是 涉及 不 同 的 屏幕 阅读 器 如 何 处 理 块 链接 的 问题 。 

一 般 建 议 将 最 相关 的 内 容 放 在 链接 的 开头 , 而 且 不 要 在 一 个 链接 中 放 入 过 多 内 容 。 随 着 屏幕 阅读 
器 和 浏览 器 逐渐 开始 官方 支持 块 链接 ， 可 访问 性 问题 可 能 只 是 暂时 的 。 

<a hre 全 "pioneer-valleyhtml"> 

<hl> 标 题 文 本 </h1> 

<img src="images/l jpg" width="143" height="131" alt="1" /> 
<img src=" images/2.jpg" width="202" height="131" alt="2" /> 
<p> 段 落 文本 </p> 

</a> 


< 注意 : 不 要 过 度 使 用 块 链接 。 应 该 避免 这 里 演示 的 情况 ,将 一 大 段 内 容 使 用 一 个 链接 包 起 来 。 尽 
管 这 样 的 链接 是 有 效 的 , 但 屏幕 阅读 器 有 可 能 将 所 有 这 些 内 容 多 朗读 一 次 ， 多 读 的 这 些 内 
容 可 能 比 访问 者 本 希望 听 到 的 链接 信息 要 多 得 多 。 因 此 ， 最 好 仅 将 与 链接 的 含义 密切 相关 
的 内 容 放 在 链接 里 。 
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| 般 来 说 ， 用 得 最 多 的 还 是 第 一 个 示例 那样 简单 、 传 统 的 链接 样式 ,不 过 也 要 知道 ， 使 用 这 种 方 
| 式 可 以 制作 精巧 的 块 链接 。 


6.2.3 ” 锚 点 链接 


| 锚 点 链接 是 指定 向 同一 页 面 或 者 其 他 页 面 中 的 特定 位 置 的 链接 。 例 如 ， 在 一 个 很 长 的 页 面 ， 在 页 
面 的 底部 设置 一 个 锚 点 ， 单 击 后 可 以 跳 转 到 页 面 顶 部 ， 这 样 避 免 了 上 下 滚动 的 麻烦 。 

| 例如 , 在 页 面 内 容 的 标题 上 设置 锚 点 ， 然 后 在 页 面 项 部 设置 锚 点 的 链接 ， 这 样 就 可 以 通过 链接 快 
速 地 浏览 具体 内 容 。 

创建 锚 点 链接 的 方法 如 下 。 

| (1) 创建 用 于 链接 的 锚 点 。 任 何 被 定义 了 ID 值 的 元 素 都 可 以 作为 锚 点 标记 ， 即 可 定义 指向 该 位 

| 置 点 的 错 点 链接 。 注 意 ， 给 页 面 标签 的 ID 锚 点 命名 时 不 要 含有 空格 ， 同 时 不 要 置 于 绝对 定位 元 素 内 。 

| (2) 在 当前 页 面 或 者 其 他 页 面 不 同位 置 定义 链接 ， 为 <a> 标 签 设置 href 属性 ， 属 性 值 为 “## 锚 

| 点 名 称 ” 如 输入 元 4。 如 果 链 接 到 不 同 的 页 面 ， 如 testhtml， 则 输入 test.html#p4， 可 以 使 用 绝对 路 径 ， 

| 也 可 以 使 用 相对 路 径 。 注 意 ， 锚 点 名 称 是 区 分 大 小 写 的 。 

| 【示例 】 下 面 示例 定义 一 个 锚 点 链接 ， 链 接 到 同一 个 页 面 的 不 同位 置 ， 效 果 如 图 6.13 所 示 。 当 

| 单 击 网 页 顶部 的 文本 链接 后 ， 会 跳 转 到 页 面 底部 的 图 片 4 所 在 位 置 。 

| IE 

<body> 

<p><a hre 人 ="#p4"> 查 看 图 片 4</a> </p> 

<h2> 图 片 1</h2> 

<p><img src="images/1.jpg" /></p> 

<h2> 图 片 2</h2> 

<p><img src="images/2.jpg" /></p> 

<h2> 图 片 3</h2> 

<p><img src="images/3.jpg" /></p> 

<h2 id="p4"> 图 片 4</h2> 

<p><img sTc="images/4.jpg" /></p> 

<h2> 图 片 5</h2> 

<p><img src="images/$.jpg" /></p> 

<h2> 图 片 6</h2> 


<p><img src="images/6.jpg" /></p> 


(a) 跳 转 前 (b) 跳 转 后 
图 6.13 ”定义 锚 链接 
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6.2.4 目标 链接 


链接 指向 的 目标 对 象 可 以 是 不 同 的 网 页 ， 也 可 以 是 相同 网 页 内 的 不 同位 置 ， 还 可 以 是 一 个 图 片 、， 视频 该 
一 个 电子 邮件 地 址 、 一 个 文件 、FTP 服务 器 ， 甚 至 是 一 个 应 用 程序 ， 也 可 以 是 一 段 JavaScript 脚 本。 ， 傅 和 

【示例 1】<a> 标 签 的 href 属性 指向 链接 的 目标 可 以 是 各 种 类 型 的 文件 。 如 果 是 浏览 器 能 够 识别 ， 
的 类 型 ， 会 直接 在 浏览 器 中 显示 ， 如 果 是 浏览 嚣 不 能 识别 的 类 型 ， 会 弹出 “文件 下 载 ”对 话 框 ,允许 | Note 
用 户 下 载 到 本 地 ， 演 示 效果 如 图 6.14 所 示 。 | 

<p><a href="images/1.jpg"> 链 接 到 图 片 </a> </p> 

<p><a hre 人 "demo .html"> 链 接 到 网 页 </a> </p> 

<p><a hre 人 "demo.docx"> 链 接 到 Word 文档 </a> </p> 


要 对 demo docx 执行 什么 操作 2 


» 打开 (O) 
不 生动 恨 和 文件 , 


学 保存 (5) 
办 另存 为 (A) 


图 6.14 下 载 Word 文 档 | 
定义 链接 地 址 为 邮箱 地 址 即 为 E-Mail 链接 。 通 过 E-Mail 链接 可 以 为 用 户 提供 方便 的 反馈 与 交流 
机 会 。 当 浏览 者 单 击 邮件 链接 时 ， 会 自动 打开 客户 端 浏 览 器 默认 的 电子 邮件 处 理 程序 (如 Outlook | 
Express)， 收 件 人 邮件 地 址 被 电子 邮件 链接 中 指定 的 地 址 自动 更 新 ， 浏 览 者 不 用 手工 输入 。 | 
创建 E-Mail 链接 方法 如 下 : 为 <a> 标 签 设置 href 属性 ， 属 性 值 为 “mailto:+ 电 子 邮件 地 址 +?+ | 
subject=+ 邮 件 主题 ”其 中 subject 表示 邮件 主题 , 为 可 选项 目 , 例如 , mailto:name@mysite. cn?subjec 全 | 
意见 和 建议 。 | 
【示例 2】 下 面 示例 使 用 <a> 标 签 创建 电子 邮件 链接 。 
<a href="mailto:name(@mysite.cn">name(@mysite.cn</a> 


全 注意 : 如 果 为 href 属性 设置 “# ， 则 表示 一 个 空 链接 ， 单 击 空 链接 ， 页 面 不 会 发 生变 化 。 
<a hre 仁 "#"> 空 链接 </a> 


如 果 为 href 属性 设置 JavaScript 脚本 ， 单 击 脚本 链接 ， 将 会 执行 脚本 。 
<a hre 人 ="javascript:alert(&quot: 谢 谢 关注 ， 投 票 已 结束 。&quot:);"> 我 要 投票 </a> 


6.2.5 下 载 链接 


当 被 链接 的 文件 不 被 浏览 器 解析 时 ， 如 二 进 制 文件 、 压 缩 文 件 等 ， 便 被 浏览 器 直接 下 载 到 本 地 计 
算 机 中 ， 这 种 链接 形式 就 是 下 载 链 接 。 


对 于 能 够 被 浏览 器 解析 的 目标 对 象 ， 用 户 可 以 使 用 HIMLS 新 增 属性 download 强制 浏览 器 执行 | 
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下 载 操作 。 
【示例 】 下 面 示例 比较 了 链接 使 用 download 和 不 使 用 download 的 区 别 。 


<p><a hre 全 "images/1.jpg" download > 下 载 图 片 </a></p> 
<p><a href="images/1.jpg" > 浏览 图 片 </a></p> 


闪 提示 : 目前， 只 有 Firefox 和 Chrome 浏览 器 支持 download 属性 。 


| 6.2.6 图 像 热点 


图 像 热 点 就 是 为 图 像 的 局 部 区 域 定义 链接 ， 当 单 击 该 热点 区 域 时 ， 会 触发 链接 ， 并 跳 转 到 其 他 网 
页 或 网 页 的 某 个 位 置 。 
| 图 像 热 点 是 一 种 特殊 的 链接 形式 ， 常 用 来 在 图 像 中 设置 导航 。 当 在 一 幅 图 上 定义 多 个 热点 区 域 ， 
| 以 实现 单 击 不 同 的 热 区 链接 到 不 同 页 面 。 


定义 图 像 热 点 ， 需 要 <map> 和 <area> 标 签 配合 使 用 ， 有 具体 说 明 如 下 。 
回 ”<map>: 定义 热点 区 域 。 包 含 必需 的 id 属性 ， 定 义 热点 区 域 的 ID， 或 者 定义 可 选 的 name 
属性 ， 也 可 以 作为 一 个 句柄 ， 与 热点 图 像 进行 绑 定 。 
| <img> 中 的 usemap 属性 可 引用 <map> 中 的 id 或 name 属性 (根据 浏览 器 )， 所 以 应 同时 向 <map> 
| 添加 id 和 name 属性 ， 且 设置 相同 的 值 。 
”加 <area>: 定义 图 像 映射 中 的 区 域 ，area 元 素 必须 嵌 套 在 <map> 标 签 中。 该 标签 包含 一 个 必 
须 设置 的 属性 alt， 定 义 热点 区 域 的 替换 文本 。 该 标签 还 包含 多 个 可 选 属性 ， 说 明 如 表 6.5 


所 示 。 


表 6.5 <area> 标 签 属性 


定义 可 单 击 区 域 〈《 对 鼠标 敏感 的 区 域 ) 的 坐标 


Fn rect (矩形 )、cire( 圆 形 )、poly (多 定义 区 域 的 形状 


规定 在 何 处 打开 href 属性 指定 的 目标 URL 
【示例 】 下 面 示例 具体 演示 了 如 何 为 一 幅 图 片 定义 多 个 热点 区 域 。 


<img src="images/china.jpg" width="618" height="499" border="0" usemap="#Map"> 
<map name="Map"> 

<area shape="circle" coords="221,261,40" href="show.php?name= 青 海 "> 
| <area shape="poly" coords="411,251,394,267,375,280,395,295,407,299,431,307,436,303,429,284,431,271, 
”426,255" href="show.php?name= 河 南 "> 
| <area shape="poly" coords="385,336,371,346,370,375,376,385,394,395,403,403,410,397,419,393,426,385, 
， 425.359,418.343.399.337" href="show.php?name= 湖 南 "> 


| </map> 
， 次 提示 : 定义 图 像 热点 ， 建 议 用 户 借助 Dreamweaver 可 视 化 设计 视图 快速 实现 ， 因 为 设置 坐标 是 
一 件 沉 力 不 计 好 的 烦 项 工作 
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6.2.7 ”框架 链接 


HIML5 已 经 不 支持 frameset 框架 ， 但 是 它 仍然 支持 过 ame 浮动 框架 的 使 用 。 浮 动 框架 可 以 自由 
控制 窗口 大 小 ， 可 以 配合 网 页 布局 在 任何 位 置 插入 窗口 ， 实 际 上 就 是 在 窗口 中 再 创建 一 个 窗口 。 | 
使 用 过 ame 创建 浮动 框架 的 用 法 如 下 。 


<iframe sre="URL"> | 
src 表示 浮动 框架 中 显示 网 页 的 路 径 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 | 
【示例 】 下 面 示例 是 在 浮动 框架 中 链接 到 百度 首页 ， 显 示 效 果 如 图 6.15 所 示 。 | 
<iframe sre="http://www.baidu.com"></iframe> 


图 6.15 使 用 浮动 框架 


从 图 6.15 可 以 看 到 ， 浮 动 框架 在 页 面 中 又 创建 了 一 个 窗口 。 在 默认 情况 下 ， 泽 动 框架 的 宽度 和 | | 
高 度 为 220X120。 如 果 需 要 调整 浮动 框架 的 尺寸 ， 应 该 使 用 CSS 样式 。 
<iframe> 标 签 包含 多 个 属性 ， 其 中 被 HTMLS5 支持 或 新 增 的 属性 如 表 6.6 所 示 。 


表 6.6 <iframe> 标 签 属性 


属 性 说 明 

frameborder [ro | 规定 是 否 显示 框架 周围 的 边框 | 
height 规定 frame 的 高 度 | 
longdese [| 规定 一 个 页 面 ， 该 页 面包 含 了 有 关 itame 的 较 长 描述 | 
marginheight ”| pixels 。 | 定义 iame 的 顶部 和 底部 的 边 距 | 
marginwidth i 定义 这 ame 的 左 侧 和 右 侧 的 边 距 
name 规定 过 ame 的 名 称 | 

allow-forms | 
sandbox allow-same-origin 启用 一 系列 对 <iframe> 中 内 容 的 额外 限制 | 

allow-scripts | 

allow-top-navigation | 
scrolling yes、no、auto 规定 是 否 在 这 ame 中 显示 滚动 条 | 
seamless 规定 <iframe> 看 上 去 像 是 包含 文档 的 一 部 分 | 
SIC 规定 在 过 ame 中 显示 的 文档 的 URL | 
Srcdoc HTIML code 规定 在 <iframe> 中 显示 的 页 面 的 HTML 内 容 | 
width pixels、% 定义 iame 的 宽度 | 
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63 案例 实战 


下 面 通 过 几 个 案例 演示 如 何在 页 面 中 应 用 列表 结构 和 链接 。 
| 6.3.1 为 快捷 菜单 添加 命令 


在 6.1.8 节 中 ， 构 建 了 弹出 菜单 的 示例 ， 但 是 没有 任何 功能 ， 本 节 将 介绍 如 何 使 用 JavaScript 实 
| 现 这 些 功能 。 

| 【示例 】 针 对 6.2 节 示例 的 HTML 代码 ， 为 它 添加 一 个 当 单 击 时 旋转 图 像 的 功能 。 本 例 将 使 用 
| CSS3 的 transform 和 transition 功能 ， 可 以 在 浏览 器 中 实现 旋转 功能 。 


<script> 
function imageRotation(name) { 
document.getElementById(image').className = name: 
} 
</script> 
<style> 
.rotate-90 { transform: rotate(90deg)} 
.Totate-180 { transform: rotate(180deg)} 
.flip-horizontal { transform: scaleX(-1)} 
.flip-vertical { transform: scaleY(-1)} 
</style> 
<img src="images/1 .png" width="500" contextmenu="demo-image" id="image" /> 
<menu id="demo-image" type="context"> 
<menu label=" 旋 转 图 像 "> 
<menuitem icon="images/icon1.png" onclick="imageRotation('rotate-90)" > 旋转 90 度 </menuitem> 
<menuitem icon="images/icon2.png" onclick="imageRotation('rotate-180")"> 旋 转 180 度 </menuitem> 
<menuitem icon="images/icon4.png" onclick="imageRotation("flip-horizontal)"> 水 平 翻转 </menuitem> 
<menuitem icon="images/icon3.png" onclick="imageRotation('flip-vertical)"> 垂 直 翻 转 </menuitem> 
</menu> 
</menu> 


在 示例 中 ， 定 义 了 4 个 类 样式 ， 分 别 设计 将 图 像 旋 转 指定 度数 。 例 如 ,“ 旋 转 90 度 ” 的 类 样式 如 下 。 
.rotate-90 { transform: rotate(90deg);} 
为 了 使 用 这 个 样式 ， 需 要 写 一 个 函数 将 它 应 用 到 图 像 。 


| function imageRotation(name) { 
| document.getElementById(image').className = name: 


} 
把 这 个 函数 和 每 一 个 menuitem 的 onclick 事件 处 理 函 数 捆绑 在 一 起 ， 并 且 传 递 一 个 参数 : 
‘Totate-90'。 


<menuitem icon="images/icon1.png" onclick="imageRotation(rotate-90)" > 旋转 90 度 </menuitem> 


| 完成 这 个 之 后 ， 再 创建 将 图 片 “ 旋 转 180 度 ” 和 翻转 图 片 的 样式 ， 将 每 一 个 函数 添加 到 独立 的 
| menuitem 中 ， 必 须要 传递 参数 。 最 后 ， 在 Firefox 浏览 器 中 预览 ， 显 示 效果 如 图 6.16 所 示 。 
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hatzhocalhosttestLhiml XC 


了 leahoxycsahml 。 加 斌 CG | EEC 


(a)“ 旋 转 90 度 ”样式 
图 6.16 为 图 片 添加 快捷 旋转 功能 


6.3.2 设计 快捷 分 享 命令 


本 节 示 例 设计 一 个 更 实用 的 分 享 功 能 ， 设 计 效果 如 图 6.17 所 示 。 右 击 页 面 中 的 文本 ， 在 弹出 的 | 
快捷 菜单 中 选择 “下 载 文件 ”命令 ,可 以 下 载 与 本 词 相关 作者 画像 ， 选择 “查看 源 文件 ”命令 , 可 以 
在 新 窗口 中 直接 浏览 作者 画像 ， 选择 “我 要 分 享 ”一 “反馈 ”命令 ， 可 以 询问 是 否 向 指定 网 址 反馈 信 | 
息 ; 选择 “我 要 分 享 ”一 Email 命令 ， 可 以 在 地 址 栏 中 发 送信 息 ， 也 可 以 向 指定 邮箱 发 送信 息 。 

本 例 主要 代码 如 下 所 示 。 

E 

Var post={ 

"source": "images/liuyong.rar", 
"demo": "images/liuyong.jpg", 
"feed": "http://www.weibo.com/" 

中 

function downloadSource() { 

window.open(post.source, '_self); 
function viewDemo() { 
window.open(post.demo, '_ blank’); 

b 

function getFeed0 { 

window.prompt(' 发 送 地 址 :', post feed): 

上 

function sendEmail() { 

var Url = document.URL:; 
var body = ' 分 享 地 址 : '+ url +"; 
window.location.href = "mailto:?subject="+ document.title +'&body="+ body +"; | 

D | 

</scrip> | 


<section id="on-a-blog" contextmenu="download"> 
<header class="section-header"> 


= 


<h3> 雨 霖 铃 <hb3> 


<p> 寒 蝉 姜 切 ， 对 长 亭 晚 ， 又 雨 初 网 。 都 门 帐 饮 无 绪 ， 留 恋 处 ， 兰 舟 催 发 。 执 手相 看 泪眼 ， 竟 无 语 凝 嘻 。 
去 去 ， 千 里 烟波 ， 昔 需 沉 沉 楚 天 阔 。 多 情 自古 伤 离别 ， 更 那 堪 ， 冷 落 清 秋 节 。 今 宵 酒 醒 何 处 ? 杨柳 岸 ， 晓 风 残 
。 此 去 经 年 ， 应 是 良辰 好 景 虚设 。 便 纵 有 千 种 风情 ， 更 与 何人 说 ? </p> 
</section> 


ey 


<menu id="download" type="context"> 
<menuitem onclick=" " icon="images/icon1.png"> 下 载 文件 </menuitem> 
<menuitem onclick="viewDemo(" icon="images/icon2.png"> 查 看 源 文件 </menuitem> 
<menu label=" 我 要 分 享 .…"> 
<menuitem onclick="getFeed()" icon="images/icon3.png"> 反 馈 </menuitem> 
<menuitem onclick="sendEmail()" icon="images/icon4.png">Email</menuitem> 


(a) 下 载 文 件 (b) 分 享 信 息 
图 6.17 定义 快捷 菜单 


6.3.3 设计 任务 列表 命令 


| 本 节 示 例 设计 一 个 动态 添加 列表 任务 的 功能 ， 设 计 效 果 如 图 6.18 所 示 。 右 击 “ 任 务 列表 ”文本 ， 
| 在 弹出 的 快捷 菜单 中 选择 “添加 新 任务 ”命令 ， 可 以 快速 为 当前 列表 添加 新 的 列表 任务 。 


httpV/Ipcalhosthtestlhtml 。 


localhostnest 可 本 | CQ ss-cork> 2 三 
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A 
var list = document.createElement(1i"); | 
list.className = 'task-item'; | 
list.innerHTML = '<input type="checkbox" name="" value="done"> 新 任务 '; | 
var taskList = document.getElementById('task’); | 


taskList.appendChild(list); 估 站 
} 2 
<section id="on-web-app" contextmenu="add task"> | Note 
<header> | 
<h3> 任 务 列表 </h3> | 
</header> | 
<ul id="task"> | 
<li class="task-item"><input type="checkbox" name="" value="done"> 任 务 一 </li> 
<li class="task-item"><input type="checkbox" name="" value="done"> 任 务 二 </li> | 
<li class="task-item"><input type="checkbox" name="" value="done"> 任 务 三 </li> | 
<hul> | 
</section> | 


<menu id="add task" type="context"> 
<menuitem onclick="addNewTask()" icon="images/add.png"> 添 加 新 任务 </menuitem> 
</menu> 


6.4 在 线 练 习 


本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HTMLS5 设计 超 链接 样式 和 列表 样式 。 感 兴趣 
的 同学 可 以 扫 码 强化 练习 。 ss 回回 


在 线 练习 1 在 线 练习 2 
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设计 表格 


在 日 常生 活 中 ， 表 格式 数据 有 多 种 形式 ， 如 财务 表格 、 调 查 数据 、 日 历 表 、 时 刘表 、 节 
目 表 等 。 在 大 多 数 情况 下 , 这 类 信息 都 由 列 标题 或 行 标题 加 上 数据 构成 。 本 章 将 介绍 HTML5 
的 table 元 素 及 其 子 元 素 ， 重 点 是 基本 的 table 结构 和 样式 


【 学 习 重点 】 

WI 结构 化 表格 
MI 设置 表格 属性 . 
MW 设置 单元 格 属性 权 
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7.1 认识 表格 结构 


从 基本 结构 分 析 ，table 元 素 是 由 行 组 成 的 ， 行 又 是 由 单元 格 组 成 的 。 
格 〈 也 ) 或 数据 单元 格 (td)， 或 者 同时 包含 这 两 种 单元 格 。 


每 行 (tr) 都 包含 标题 单元 | 


Note 


为 整个 表格 添加 一 个 标题 caption) 有 助 于 访问 者 理解 该 表格 。 在 浏览 器 中 ， 标 题 通常 显示 在 表 | | 


格 上 方 。 使 用 scope 属性 可 以 告诉 屏幕 阅读 器 和 其 他 辅助 设备 当前 的 也 是 列 的 标题 单元 格 
(scope="col")， 还 是 行 的 标题 单元 格 (scope="row")， 或 是 用 于 其 他 目的 的 单元 格 。 

在 默认 情况 下 ， 表 格 在 浏览 器 中 呈现 的 宽度 是 其 中 的 信息 在 页 面 可 用 空间 里 所 需要 的 最 小 宽度 。 
可 以 通过 CSS 改变 表格 的 格式 。 


如 果 每 行 也 有 标题 单元 格 ， 就 很 容易 理解 。 添 加 这 些 单元 格 只 需要 在 每 行 开头 添 Rn 一 个 也 元 表 


即 可 。 列 标题 应 设置 scope="col"， 而 每 个 行 的 也 (位 于 td 之 前 〉 则 应 设置 scope="row"。 


【示例 1】 下 面 示例 使 用 各 种 表格 标签 设计 一 个 符合 标准 的 表格 结构 。 


<table> 
<caption> 符合 标准 的 表格 结构 </caption> 
<tr> 
<th> 标 题 1</th> 
<th> 标 题 2</th> 
</tr> 
<tr> 
<td> 数 据 1</td> 
<td> 数 据 2</td> 
</tr> 
</table> 


这 是 个 很 简单 的 表格 ， 它 只 有 一 个 包含 标题 单元 格 (th 元 素 ) 的 行 和 3 个 包含 数据 单元 格 (td 
元 素 ) 的 行 。 每 行 都 是 由 站 元素 标记 。 在 本 例 中 也 包含 了 caption 元 素 ， 不 过 它 是 可 选 的 。 

【示例 2】 下 面 示例 通过 指定 thead、tbody 和 tfoot 显 式 定义 表格 的 不 同 部 分 。 在 每 行 的 开头 添加 
也 元 素 。tbody 和 tfoot 中 的 也 设置 scope="row"， 表 明 它 们 是 行 标题 。 


<style type="text/css"> 
table { width: 100%; } 
caption { font-size: 24px; margin: 12px; color: blue: } 
th, td { border: solid 1px blue; padding: 8px: } 
tfoot td { text-align: right; color: red: } 
</style> 
<table> 
<caption> 结 构 化 表格 标签 </caption> 
<thead> 
<tr> 
<th> 标 签 </th> 
<th> 说 明 </th> 
</t> 
</thead> 
<tfoot> 


rs 
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<td colspan=-"2">* 在 表格 中 ， 上 述 标签 属于 可 选 标签 。</td> 
</tr> 


| <td>&lt:thead&gt:</td> 
<td> 定 义 表 头 结构 。</td> 


</tr> 
<tr> 

<td>&lttbody&gt</td> 

<td> 定 义 表格 主体 结构 。</td> 
</tr> 
<tr> 

<td>&lt;tfoot&gt:</td> 

<td> 定 义 表格 的 页 脚 结构 。</td> 
</t> 


| 在 示例 2 代码 中 ， 可 以 看 到 <tfoot> 是 放 在 <thead> 和 <tbody> 之 间 ， 而 最 终 在 浏览 器 中 会 发 现 <tfoot> 
”中 的 内 容 显 示 在 表格 底部 。 在 <tfoot> 标 签 中 有 一 个 colspan 属性 , 该 属性 主要 功能 是 横向 合并 单元 格 ， 
| | 将 表格 底部 的 两 个 单元 格 合并 为 一 个 单元 格 ， 示 例 效果 如 图 7.1 所 示 。 


由 -| 攻 htpy/localhosthest html 


结构 化 表格 标签 
说 明 


定义 表 头 结构 。 
定义 表格 主体 结构 。 
定义 表格 的 页 脚 结构 。 


* 在 表格 中 ， 上 述 标 签 属于 可 选 标签 。 


图 7.1 表格 结构 效果 图 


如 果 table 是 嵌 套 在 figure 元 素 内 ， 可 以 省 略 caption， 使 用 figcaption 对 表格 进行 描述 。 注 意 , 不 
要 在 table 中 嵌 套 figcaption， 而 应 将 figcaption 放 在 figure 中 。 可 以 通过 scope 属性 指定 也 为 一 组 列 
| | 的 标题 (scope="colgroup")， 或 者 为 一 组 行 的 标题 (scope="rowgroup")。 


7.2 新 建 表 格 


| 表格 有 多 种 形式 ， 如 简单 的 表格 、 带 标题 的 表格 、 结 构 化 的 表格 、 列 分 组 的 表格 等 ， 本 节 将 介绍 
| 这 些 不 同形 式 的 表格 的 设计 方法 。 


康 只 i 记 
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7.2.1 定义 普通 表格 


加 
使 用 table 元 素 可 以 定义 HTML 表格 。 简 单 的 HTML 表格 由 一 个 table 元素， 以 及 一 个 或 多 个 区 。 抽 归 让 
和 td 元素 组 成 ， 其 中 蕊 元 素 定义 表格 行 ，td 元 素 定义 表格 的 单元 格 。 | 侠 - 
【示例 】 下 面 示例 设计 一 个 简单 的 HTML 表格 ， 包 含 两 行 两 列 ， 演 示 效 果 如 图 72 所 示 。 
Note 
<table> | 
和 
<td> 月 落 乌 叶 逢 满 天 ，</td> 
<td> 江 枫 渔 火 对 悉 卢 。</td> 
</tr> 
<tr> 


<td> 姑 苏 城 外 寒山 地，</td> 

<td> 夜 半 钟 声 到 客船 。</td> 
</tr> 
</table> 


月 落 乌 响 霜 满 天 ， 江 本 渔 火 对 愁 眠 。 
姑 劳 城 外 寒山 寺 ， 夜半 钟 声 到 客船 。 


图 72 设计 简单 的 表格 
7.2.2 ”定义 列 标题 


在 数据 表格 中 ， 每 列 可 以 包含 一 个 标题 ， 这 在 数据 库 中 被 称 为 字段 ， 在 HTML 中 被 称 为 表 头 单 【加 
元 格 。 使 用 也 元 素 定义 表 头 单元 格 。 Ee 
次 提示 : HTML 表格 中 有 两 种 类 型 的 单元 格 如 下 。 | 

团 表 头 单元 格 : 包含 表 头 信息 ， 由 也 元 素 创建 。 

回 标准 单元 格 : 包含 数据 ， 由 记 元 素 创建。 | 

在 默认 状态 下 ， 也 元素 内 部 的 文本 呈现 为 居中 、 粗 体 显示 ， 而 岂 元 来 内 通 党 是 丰 对 弄 的 

普通 文本 。 


【示例 1】 下 面 示例 设计 一 个 含有 表 头 信息 的 HTML 表格 ,包含 两 行 两 列 ， 演 示 效 果 如 图 7.3 所 示 。 


<table> 
<tr> 
<th> 用 户 名 </th><th> 电 子 邮 箱 </th> 
</t> 
<tr> 
<td> 张 三 </td><td>zhangsan@163.com</td> 
</t> 
</table> 


表 头 单元 格 一 般 位 于 表格 的 第 一 行 ， 当 然 用 户 可 以 根据 需要 把 表 头 单元 格 放 在 表格 中 任意 位 置 ， 
例如 ， 第 一 行 或 最 后 一 行 ， 第 一 列 或 最 后 一 列 等 。 也 可 以 定义 多 重 表 头 。 
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| CO™ 
Eh, 
| 【示例 2】 下 面 示例 设计 了 一 个 简单 的 课程 表 ， 表 格 中 包含 行 标 题 和 列 标题 ， 即 表格 被 定义 了 两 
”类 表 头 单元 格 ， 演 示 效果 如 图 74 所 示 。 


| <table> 
| <tr> 


| <th>&nbsp;</th> 
<th> 星 期 一 </th><th> 星 期 二 </th><th> 星 期 三 </th><th> 星 期 四 </th><th> 星 期 五 </th> 

本 
| <tr> 

<th> 第 1 节 </th> 

<td> 语 文 </td><td> 物 理 </td> <td> 数 学 </td><td> 语 文 </td> <td> 美 术 </td> 
</t> 
<tr> 

<th> 第 2 节 </th> 

<td> 数 学 </td><td> 语 文 </td> <td> 体 育 </td> <td> 英 语 </td><td> 音 乐 </td> 
</tr> 
<tr> 

<th> 第 3 节 </th> 

<td> 语 文 </td><td> 体 育 </td><td> 数 学 </td><td> 英 语 </td><td> 地 理 </td> 
</tr> 
<tr> 
<th> 第 4 节 </th> 
<td> 地 理 </td><td> 化 学 </td> <td> 语 文 </td><td> 语 文 </td><td> 美 术 </td> 


让 中 -各 htp//ocalho.. ~ SC | @ localhost 


ee lobor 
| 


用 户 名 ”电子 邮箱 
张 = zhangsan@163.com 


图 7.3 设计 带 有 表 头 的 表格 图 7.4 设计 双 表 头 的 表格 
7.2.3 ”定义 表格 标题 


【示例 】 以 7.2.2 节 示 例 1 为 基础 ， 为 表格 添加 一 个 标题 ， 演 示 效 果 如 图 7.5 所 示 。 


<table> 
<caption> 通 讯 录 </caption> 
<tr> 


<th> 用 户 名 </th> 
<th> 电 子 邮箱 </th> 
</t> 
<tr> 


.114 。 


第 7 章 设计 表格 一 | 


<td> 张 三 </td> | 
<td>zhangsan@163.com</td> | 
</t> | 
</table> | ， 
Note 


图 7.5 设计 带 有 标题 的 表格 


从 图 7.5 可 以 看 到 ， 在 默认 状态 下 这 个 标题 位 于 表格 上 面 居中 显示 。 
旋 提示 : 在 HIML4 中 ， 可 以 使 用 align 属性 设置 标题 的 对 齐 方式 ， 取 值 包括 left、right、top、botom。 
在 HTML5 中 已 不 赞成 使 用 ， 建 议 使 用 CSS 样式 取而代之 。 | 


7.2.4 ”表格 行 分 组 


thead、tfoot 和 tbody 元 素 可 以 对 表格 中 的 行进 行 分 组 。 当 创建 表格 时 ， 如 果 希 望 拥有 一 个 标题 
行 、 一 些 带 有 数据 的 行 ， 以 及 位 于 底部 的 一 个 总 计 行 ， 这 样 可 以 设计 独立 于 表格 标题 和 页 脚 的 表格 正 | 
文 滚动 。 当 长 的 表格 被 打印 时 ， 表 格 的 表 头 和 页 脚 可 被 打印 在 包含 表格 数据 的 每 张 页面 上 。 | 
使 用 thead 元 素 可 以 定义 表格 的 表 头 ， 该 标签 用 于 组 合 HTML 表格 的 表 头 内 容 ， 一 般 与 tbody 和 | 
tfoot 元 素 结合 起 来 使 用 。 其 中 tbody 元 素 用 于 对 HTML 表格 中 的 主体 内 容 进行 分 组 ， 而 tfoot 元 素 用 | 
于 对 HIML 表格 中 的 表 注 《〈 页 脚 ) 内 容 进行 分 组 。 | 
【示例 】 下 面 示例 使 用 上 述 各 种 表格 标签 对 象 ， 设 计 一 个 符合 标准 的 表格 结构 ， 代 码 如 下 所 示 。 | 


<style type="text/css"> 
table { width: 100%; } 
caption { font-size: 24px; margin: 12px; color: blue; } 
th, td { border: solid 1px blue; padding: 8px: } 
tfoot td { text-align: right; color: red: } 
</style> 
<table> 
<caption> 结 构 化 表格 标签 </caption> 
<thead> 
<tr><th> 标 签 </th><th> 说 明 </th></tr> 
</thead> 
<tfoot> 
<tr><td colspan="2">* 在 表格 中 ， 上 述 标签 属于 可 选 标签 。</td></tr> 
</tfoot> 
<tbody> 
<tr><td>&lt:thead&gt:</td> <td> 定 义 表 头 结构 。</td></t> 
<tr><td>&lt;tbody&gt;</td><td> 定 义 表格 主体 结构 。</td></tr> 
<tr><td>&lt:tfoot&gt;</td><td> 定 义 表 格 的 页 脚 结构 。</td></tr> 
</tbody> 
</table> 


在 上 面 示例 代 码 中 ， 可 以 看 到 <tfoot> 是 放 在 <thead> 和 <tbody> 之 间 ， 而 最 终 在 浏览 器 中 会 发 现 


i 


<tfoot> 中 的 内 容 显示 在 表格 底部 。 在 <tfoof> 标 签 中 有 一 个 colspan 属性 ， 该 属性 主要 功能 是 横向 合并 
| 单元 格 ， 将 表格 底部 的 两 个 单元 格 合并 为 一 个 单元 格 ， 示 例 效 果 如 图 7.6 所 示 。 


bale Ce)- S hep/ocohosutert hm 


天 结构 化 表格 标签 


* 在 表格 中 ， 上 述 标签 属于 可 渤 标签。 


图 7.6 表格 结构 效果 图 


| < 人 注意 : 当 使 用 thead、tfoot 和 tbody 元 素 时 ， 必 须 使 用 全 部 的 元 素 ， 排 列 次 序 是 : thead、tfoot、 
tbody， 这 样 浏览 器 就 可 以 在 收 到 所 有 数据 前 呈现 页 脚 ， 且 这 些 元 素 必须 在 table 元 素 内 部 


| 使 用 。 
| 
| 在 默认 情况 下 ， 这 些 元 素 不 会 影响 到 表格 的 布局 。 不 过 ， 用 户 可 以 使 用 CSS 使 这 些 元 素 


| 改变 表格 的 外 观 。 在 <thead> 标 签 内 部 必须 包含 <tr> 标 答 。 


7.2.5 表格 列 分 组 
ccol 和 colgroup 元 素 可 以 对 表格 中 的 列 进行 分 组 。 
其 中 ， 使 用 <coP> 标 签 可 以 为 表格 中 一 个 或 多 个 列 定义 属性 值 。 如 果 需 要 对 全 部 列 应 用 样式 ，<col> 


标签 很 有 用 ， 这 样 就 不 需要 对 各 个 单元 格 和 各 行 重复 应 用 样式 。 
【示例 1】 下 面 示例 使 用 col 元 素 为 表格 中 的 3 列 设置 不 同 的 对 齐 方 式 ， 效 果 如 图 7.7 所 示 。 


| 
<table width="100%" border="1"> 
<col align="left" /> 
<col align="center" /> 
<col align="right" /> 
<tr><td> 慈 母 手中 线 ，</td><td> 游 子 身上 衣 。</td><td> 临 行 密 密 颖 ，</td></tr> 
<tr><td> 意 轴 迟 迟 归 。</td><td> 谁 言 寸 草 心 ，</td><td> 报 得 三 春晖 。</td></tr> 


</table> 


恪 行 窗帘 苇 ， 
骤 得 三 春琴、 


图 7.7 表格 列 分 组 样式 
在 上 面 示例 1 中 , 使 用 3 个 col 元 素 为 表格 中 3 列 分 别 定义 不 同 的 对 齐 方式 。 这 号 
签 属性 align 设置 对 齐 方式 ， 取 值 包括 right ( 右 对 齐 )、left ( 左 对 齐 )、center (居中 对 齐 )、justify (两 
端 对 齐 ) 和 char (对 准 指定 字符 )。 由 于 浏览 器 支持 不 统一 ， 不 建议 使 用 align 属性 。 


有 使 用 HTML 标 


a 
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安 提示 : 只 能 在 table 或 colgroup 元 素 中 使 用 col 元素。col 元 素 是 仅 包含 属性 的 空 元 素 ， 起 
含 任何 信息 。 如 要 创建 列 ， 就 必须 在 全 元素 内 嵌入 td 元 素 。 | 


使 用 <colgroup> 标 签 也 可 以 对 表格 中 的 列 进行 组 合 ， 以 便 对 其 进行 格式 化 。 如 果 需要 对 全 部 列 应 | 
用 样式 ，<colgroup> 标 签 很 有 有 用， 这样 就 不 需要 对 各 个 单元 格 和 各 行 重复 应 用 样式 。 | 
【示例 2】 下 面 示例 使 用 colgroup 元 素 为 表格 中 每 列 定义 不 同 的 宽度 ， 效 果 如 图 7.8 所 示 。 


<style type="text/css"> 
-coll { width: 25%; color: red; font-size: 16px; } 
-col2 { width: 50%; color: blue; } 
</style> 
<table width="100%" border="1"> 
<colgroup span="2" class="coll"></colgroup> 
<colgroup class="col2"></colgroup> 
<tr><td> 慈 母 手 中 线 ，</td><td> 游 子 身上 衣 。</td><td> 临 行 密 密 缝 ，</td></tr> 
<tr><td> 意 丽 迟 迟 归 。</td><td> 谁 言 寸 草 心 ，</td><td> 报 得 三 春晖 。</td></tr> 
</table> 


Note 


localhost/estahtml x 


CG | © localhost/test2.ntm 


吹 号 手中 线 ， 游子 身上 家 。 | 临 行 刻 客 注 ， 
区 ER 万、 谁 言 十 草 心 , 服 得 三 雁 晖 、 


图 7.8 定义 表格 列 分 组 样式 
<colgroup> 标 签 只 能 在 table 元 素 中 使 用 。 | 
为 列 分 组 定义 样式 时 ， 建 议 为 <colgroup> 或 <col> 标 签 添加 elass 属性 ， 然 后 使 用 CSS 类 样式 定义 | 
列 的 对 齐 方式 、 宽 度 和 背景 色 等 样式 。 | 
【示例 3】 从 上 面 两 个 示例 可 以 看 到 ，<colgroup> 和 <col> 标 签 具有 相同 的 功能 ， 同 时 也 可 以 把 <col> | 
标签 嵌入 <colgroup> 标 签 中 使 用 。 | 
<table width="100%" border="1"> 
<colgroup> 
<col span="2" class="coll" /> 
<col class="col2" /> 


</colgroup> 
<tr><td> 慈 母 手中 线 ，</td><td> 游 子 身上 衣 。</td><td> 临 行 密 密 颖 ，</td></tr> 


<tr><td> 意 恐 迟 迟 归 。</td><td> 谁 言 寸 草 心 ，</td><td> 报 得 三 春晖 。</td></t> 
</table> 


如 果 没有 对 应 的 col 元 素 ， 列 会 从 colgroup 元 素 那 里 继承 所 有 的 属性 值 。 
岩 提示 : span 是 <colgroup> 和 <col> 标 签 专用 属性 ， 规 定 列 组 应 该 横路 的 列 数 ， 取 值 为 正 整 数 . 例 | 
如 ， 在 一 个 包含 6 列 的 表格 中 ， 第 一 组 有 4 列 ， 第 二 组 有 两 列 ， 这 样 的 表格 在 列 上 进行 分 

组 如 下 所 示 。 | 


<colgroup span="4"></colgroup> 
<colgroup span="2"></colgroup> 


浏览 器 将 表格 的 单元 格 合成 列 时, 会 将 每 行 前 4 个 单元 格 合成 第 一 个 列 组 , 将 接 下 来 的 两 个 单元 
格 合成 第 二 个 列 组 。 这 样 ，<colgroup> 标 签 的 其 他 属性 就 可 以 用 于 该 列 组 包含 的 列 中 。 上 
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如 果 没 有 设置 span 属性 ， 则 每 个 <colgroup> 或 <col> 标 签 代表 一 列 ， 按 顺序 排列 。 


< 注意 ; 现代 浏览 器 都 支持 <colgroup> 和 <col> 标 签 ， 但 是 Firefox、Chrome 和 Safari 浏览 器 仅 支持 
col 和 colgroup 元 素 的 span 和 width 属性 。 也 就 是 说 ， 用 户 只 能 够 通过 列 分 组 为 表格 的 列 
定义 统一 的 宽度 ， 另 外 也 可 以 定义 背景 色 ， 但 是 其 他 CSS 样式 不 支持 。 虽 然 下 浏览 器 支 
持 ， 但 是 不 建议 用 户 去 应 用 。 通 过 上 面 示例 2， 用 户 也 能 够 看 到 CSS 类 样式 中 的 “color: red;” 
| 和 “font-size:16px;” 都 没有 发 挥 作用 。 

【示例 4】 下面 示例 定义 如 下 几 个 类 样式 ， 然 后 分 别 应 用 到 <co> 列 标签 中 ， 显 示 效果 如 图 79 所 示 。 


<style type="text/css"> 
| table { 上 # 表格 默认 样式 */ 
border: solid 1px #99CCFF:; 
border-collapse: collapse;} 
bg th{ 局 标题 行 类 样式 */ 
background: #0000FF; 
color:#ffF;} 
.bg evenl { 上 # 列 1 类 样式 */ 
| background: #CCCCFF:} 
‘bg even2 { 谍 列 2 类 样式 *#/ 
background: #FFFFCC:} 
| </style> 
| <table> 
<caption>IE 浏览 器 发 展 大 事 记 </caption> 
<colgroup> 
| <col class="bg_evenl" id="verson" /> 
| <col class="bg_even2" id="postTime" /> 
<col class="bg_evenl" id="OS"/> 
</colgroup> 
| <tr class="bg_th"> 
<th> 版 本 </th><th> 发 布 时 间 </th><th> 绑 定 系统 </th> 
</tr> 
<tr> 
<td>Internet Explorer 1</td><td>1995 年 8 月 </td><td>Windows 95 Plus! Pack</td> 
</t> 


本 五 
Imtemet Explorer | 1995 年 5 日 
lmtemet Expglorer 2 1993 年 1 朋 


lmtemet Explarar9 2011 年 3 月 
lmtemet Explorer 10 2013 年 2 月。 Windows ® 


图 7.9 设计 隔 列 变色 的 样式 效果 
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7.3 设置 <table> 属 性 


| 


表格 标签 包含 大 量 属性 ， 其 中 大 部 分 属性 都 可 以 使 用 CSS 属性 代替 使 用 ， 也 有 几 个 专用 属性 无 ， 


法 使 用 CSS 实现 。HTMLS 支持 的 <table> 标 签 属性 说 明 如 表 7.1 所 示 。 Note 
表 7.1 HTML5 支持 的 <table> 标 签 属性 | 
属 性 说 明 | 


border 


定义 表格 边框 ， 值 为 整数 ， 单 位 为 像素 。 当 值 为 0 时， 表示 隐藏 表格 边框 线 。 功 能 类 似 CSS | 
中 的 border 属性 ， 但 是 没有 CSS 提供 的 边框 属性 强大 | 
cellpadding | 定义 数据 表单 元 格 的 补 白 。 功 能 类 似 CSS 中 的 padding 属性 ， 但 是 功能 比较 弱 | 
cellspacing “| 定义 数据 表单 元 格 的 边界 。 功 能 类 似 CSS 中 的 margin 属性 ， 但 是 功能 比较 弱 | 
width 定义 数据 表 的 宽度 。 功 能 类 似 Css 中 的 width 属性 | 
设置 数据 表 的 外 边框 线 显示 ， 实 际 上 它 是 对 border 属性 的 功能 扩展 。 

取 值 包括 void (不 显示 任 一 边框 线 )、above (顶端 边 框 线 )、below〔 底 部 边框 线 )、hsides( 顶 


me 部 和 底部 边框 线 )、Ihs( 左 边框 线 )、ths( 右 边框 线 )、vsides 左 和 右边 的 框 线 )、box (所 有 
四 周 的 边框 线 )、border (所 有 四 周 的 边框 线 ) 
设置 数据 表 的 内 边线 显示 ， 实 际 上 它 是 对 border 属性 的 功能 扩展 。 
mles 取 值 包 括 none (禁止 显 示 内 边线 )、groups( 仅 显示 分 组 内 边线 )、rows (显示 每 行 的 水 平 线 )、 
cols〈 显 示 每 列 的 垂直 线 )、all (显示 所 有 行 和 列 的 内 边线 ) | 
summary 定义 表格 的 摘要 ， 没 有 CSS 对 应 属性 | 


7.3.1 定义 单线 表格 


rules 和 frame 是 两 个 特殊 的 表格 样式 属性 ， 用 于 定义 表格 的 各 个 内 、 外 边框 线 是 否 显示 。 由 于 使 

用 CSS 的 border 属性 可 以 实现 相同 的 效果 ， 所 以 不 建议 用 户 选用 。 这 两 个 属性 的 取 值 可 以 参考 表 7.1 
说 明 。 

【示例 】 在 下 面 示例 中 ， 借 助 表格 标签 的 frame 和 rules 属性 定义 表格 以 单行 线 的 形式 进行 显示 。 


<table border="1" frame="hsides" rules="rows" width="1009%0"> 
<caption>frame 属性 取 值 说 明 </caption> 
<tr><th> 值 </th><th> 说 明 </th></tr> 
<tr><td>void</td><td> 不 显示 外 侧 边框 。</td></tr> 
<tr><td>above</td><td> 显 示 上 部 的 外 侧 边框 。</td></t> 
<tr><td>below</td><td> 显 示 下 部 的 外 侧 边 框 。</td> </tr> | 
<tr><td>hsides</td><td> 显 示 上 部 和 下 部 的 外 侧 边 框 。</td></t> | 
<tr><td>vsides</td><td> 显 示 左 边 和 右边 的 外 侧 边 框 。</td></tr> | 
<tr><td>lhs</td><td> 显 示 左边 的 外 侧 边框 。</td></tr> 
<tr><td>rhs</td><td> 显 示 右 边 的 外 侧 边 框 。</td></t> 
<tr><td>box</td> <td> 在 所 有 四 个 边 上 显示 外 侧 边框 。</td></tr> 
<tr><td>border</td><td> 在 所 有 四 个 边 上 显示 外 侧 边框 。</td></t> | 

</table> | 


上 面 示例 通过 frame 属性 定义 表格 仅 显 示 上 下 框 线 ， 使 用 rules 属性 定义 表格 仅 显 示 水 平 内 边线 ， 


Hs 
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从 而 设计 出 单行 线 数据 表格 效果 。 在 使 用 frame 和 mules 属性 时 ， 同 时 定义 border 属性 ， 指 定数 据 表 
显示 边框 线 。 在 浏览 器 中 预览 ， 显 示 效 果 如 图 7.10 所 示 。 


[localhost/test1.html xx 全 向 


© [© localhost/testT .ntml 


frame 属性 取 值 说 明 
说 明 


不 显示 外 便 边 杠 。 
显示 上 部 的 外 全 边框 。 


人 
显示 左边 的 外 侧 边 框 

蝇 示 万 的 外 全 边框: 

在 所 有 四 个 边 上 显示 外 全 边框 。 
在 所 有 四 个 边 上 显示 外 全 边框 。 


图 7.10 定义 单线 表格 样式 
有 ”7.3.2 ”定义 分 离 单元 格 


cellpadding 属性 用 于 定义 单元 格 边沿 与 其 内 容 之 间 的 空白 ，cellspacing 属性 定义 单元 格 之 间 的 空 
间 。 这 两 个 属性 的 取 值 单位 为 像素 或 者 百分比 。 
【示例 】 下 面 示例 设计 “ 井 ” 字 形状 的 表格 。 

<table border="l" frame="void" cellpadding="6" cellspacing="16"> 
<caption>mles 属性 取 值 说 明 </caption> 
<tr><th> 值 </th><th> 说 明 </th></tr> 
<tr><td>none</td><td> 没 有 线条 。</td></tr> 
<tr><td>groups</td><td> 位 于 行 组 和 列 组 之 间 的 线条 。</td></t> 
<tr><td>rows</td><td> 位 于 行 之 间 的 线条 。</td></tr> 
<tr><td>cols</td><td> 位 于 列 之 间 的 线条 。</td></tr> 
<tr><td>all</td><td> 位 于 行 和 列 之 间 的 线条 。</td></tr> 

</table> 


上 面 示例 通过 frame 属性 隐藏 表格 外 框 , 然后 使 用 cellpadding 属性 定义 单元 格 内 容 的 边 距 为 6 像 
| 素 ， 单元 格 之 间 的 间距 为 16 像素 ， 下 7.11 所 示 。 


DD localbosthestihtml x 了 

C | © localhost/test1.html 
rules 属 性 取 值 说 明 
说 明 


没有 线条 。 


位 于 行 组 和 列 组 之 间 的 线条 。 


位 于 行 之 间 的 线条 。 


位 于 列 之 间 的 线条 。 


位 于 行 和 列 之 间 的 线条 。 


图 7.11 定义 分 离 单元 格 样式 


a 20s 
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次 提示 : cellpadding 属性 定义 的 效果 ， 可 以 使 用 CSS 的 padding 样式 属性 代替 ， 建 议 不 要 直接 使 用 | 
cellpadding 属性 。 | 


7.3.3 ”定义 细 线 边框 鲜 | 


使 用 <table> 标 签 的 border 属性 可 以 定义 表格 的 边框 粗细 ， 取 值 单位 为 像素 ， 当 值 为 0 时 表示 隐 
藏 表格 边框 线 。 

【示例 】 如 果 直 接 为 <table> 标 签 设置 border="1"， 则 表格 呈现 的 边 杠 线 效果 如 图 7.12 所 示 。 下 面 
示例 配合 使 用 border 和 rules 属性 ， 可 以 设计 细 线 表格 。 


<table border="1" rules="all" width="100%"> 
<caption>rules 属性 取 值 说 明 </caption> 
<tr><th> 值 </th><th> 说 明 </th></tr> 
<tr><td>none</td><td> 没 有 线条 。</td></tr> | 
<tr><td>groups</td><td> 位 于 行 组 和 列 组 之 间 的 线条 。</td></tr> | 
<tr><td>rows</td><td> 位 于 行 之 间 的 线条 。</td></tr> | 
<tr><td>cols</td><td> 位 于 列 之 间 的 线条 。</td></t> 
<tr><td>all</td><td> 位 于 行 和 列 之 间 的 线条 。</td></tr> 

</table> | 


上 面 示例 定义 <table> 标 签 的 border 属性 值 为 1, 同时 设置 mles 属性 值 为 "all", 则 显示 效果 如 图 7.13 | 
所 示 。 


[Dlocalhost/testi.html x Ne [Dlocalhost/test1 html x Ne 


C | © localhost/test1.html : © | © localhost/test1.html 


rules 属 性 取 值 说 明 
说 明 


rules 属 性 取 值 说 明 
eg | 

pe 县 有 绩 条 [ee 行 组 和 列 组 之 辣 

ro | 位 于 生 组 条 硬 之 辣 半 绩 条 [他 下 和 用 

ans | 位 于 行 之 的 红 条 。 ] EE 一 他 和 5 之 几 的 线条 ， 

eals | 位于 列 之 辣 的 线条 。 | [aa 位 于 行 和 列 之 间 的 线 东 。 

Ell 位 于 行 和 列 之 间 的 线 芭 - 记 3 


图 7.12 表格 默认 边框 样式 图 7.13 设计 细 线 边框 效果 


7.3.4 添加 表格 说 明 


使 用 <table> 标 签 的 summary 属性 可 以 设置 表格 内 容 的 摘要 ， 该 属性 的 值 不 会 显示 ， 但 是 屏幕 阅 ， 购 
读 器 可 以 利用 该 属性 ， 也 方便 机 器 进行 表格 内 容 检索 。 失 
【示例 】 下 面 示例 使 用 summary 属性 为 表格 添加 一 个 简单 的 内 容 说 明 ， 以 方便 搜索 引擎 检索 。 
<table border="1" rules="all" width="100%" summary="rles 属性 取 值 说 明 "> 
<tr><th> 值 </th><th> 说 明 </th></tr> 
<tr><td>none</td><td> 没 有 线条 。</td></tr> 
<tr><td>groups</td><td> 位 于 行 组 和 列 组 之 间 的 线条 。</td></t> 
<tr><td>rows</td><td> 位 于 行 之 间 的 线条 。</td></t> | 
<tr><td>cols</td><td> 位 于 列 之 间 的 线条 。</td></tr> | 
<tr><td>all</td><td> 位 于 行 和 列 之 间 的 线条 。</td></tr> | 
</table> | 


A 
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7.4 设置 <td> 和 <th> 属 性 


单元 格 标签 (<td> 和 <th>) 也 包含 大 量 属性 ， 其 中 大 部 分 属性 都 可 以 使 用 CSS 属性 代替 使 用 ， 也 
有 几 个 专用 属性 无 法 使 用 CSS 实现 。HTMLS5 支持 的 <td> 和 <th> 标 签 属性 说 明 如 表 7.2 所 示 。 


表 7.2 HTML5 支持 的 <td> 和 <th> 标 签 属性 

属 性 说 有 阴 
| _abbr 定义 单元 格 中 内 容 的 缩写 版 本 
定义 单元 格 内 容 的 水 平 对 齐 方式 。 取 值 包括 : right ( 右 对 齐 )、left ( 左 对 齐 )、center (居中 对 齐 )、 
align justify 〈 两 端 对 齐 ) 和 char (对 准 指定 字符 )。 功 能 类 似 CSS 中 的 text-align 属性 ， 建 议 使 用 CSS 
完成 设计 

axis 对 单元 进行 分 类 。 取 值 为 一 个 类 名 

char 定义 根据 哪个 字符 来 进行 内 容 的 对 齐 

charo 人 ff 定义 对 齐 字符 的 偏 移 量 

colspan 定义 单元 格 可 横 跨 的 列 数 

headers 定义 与 单元 格 相关 的 表 头 

rowspan | 定义 单元 格 可 横 跨 的 行 数 
定义 将 表 头 数据 与 单元 格 数据 相关 联 的 方法 。 取 值 包 括 : col ( 列 的 表 头 )、colgroup〈 列 组 的 表 
头 )、row ( 行 的 表 头 )、rowgroup〈 行 组 的 表 头 ) 
定义 单元 格 内 容 的 垂直 排列 方式 。 取 值 包括 : top 顶部 对 齐 )、middle〔( 居 中 对 齐 )、bottom( 底 
部 对 齐 )、baseline (基线 对 齐 )。 功 能 类 似 CSS 中 的 vertical-align 属性 ， 建 议 使 用 CSS 完成 设计 


scope 


valign 


7.4.1 定义 跨 单元 格 显示 


colspan 和 rowspan 是 两 个 重要 的 单元 格 属性 ， 分 别 用 来 定义 单元 格 可 跨 列 或 跨行 显示 。 取 值 为 
正 整数 ， 如 果 取 值 为 0 时 ， 则 表示 浏览 器 横 跨 到 列 组 的 最 后 一 列 ， 或 者 行 组 的 最 后 一 行 。 
【示例 】 下 面 示例 使 用 colspan=5 属性 ， 定 义 单元 格 跨 列 显示 ， 效 果 如 图 7.14 所 示 。 
<table border=1> 
<tr> 
<th align=center colspan=5> 课 程 表 </th> 
</tr> 


<th> 星 期 一 </th><th> 星 期 二 </th> <th> 星 期 三 </th><th> 星 期 四 </th><th> 星 期 五 </th> 
</tr> 


<td align=center colspan=5> 上 午 </td> 
</t> 


<td> 语 文 </td><td> 物 理 </td> <td> 数 学 </td> <td> 语 文 </td><td> 美 术 </td> 
</tr> 


王位 


CC 人/ 
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<td> 数 学 </td><td> 语 文 </td><td> 体 育 </td> <td> 英 语 </td><td> 音 乐 </td> 


和 


<td> 语 文 </td> <td> 体 育 </td><td> 数 学 </td><td> 英 语 </td><td> 地 理 </td> 


和 


<td> 地 理 </td><td> 化 学 </td><td> 语 文 </td> <td> 语 文 </td><td> 美 术 </td> Note 


和 


<td align=center colspan=5> 下 午 </td> 


和 


</t> 
<tr> 


<td> 作 文 </td><td> 语 文 </td><td> 数 学 </td><td> 体 育 </td><td> 化 学 </td> 
<td> 生 物 </td><td> 语 文 </td><td> 物 理 </td><td> 自 修 </td><td> 自 修 </td> | 


图 7.14 定义 单元 格 跨 列 显示 


7.4.2 定义 表 头 单元 格 E 
| 回 


使 用 scope 属性 ， 可 以 将 单元 格 与 表 头 单元 格 联系 起 来 。 其 中 属性 值 row， 表 示 将 当前 行 的 所 有 | 视频 讲解 
单元 格 和 表 头 单元 格 绑 定 起 来 ， 属 性 值 col， 表 示 将 当前 列 的 所 有 单元 格 和 表 头 单元 格 绑 定 起 来 ， 属 | 
性 值 rowgroup， 表 示 将 单元 格 所 在 的 行 组 〈 由 <thead>、<tbody> 或 <tfoof> 标 签 定义 ) 和 表 头 单元 格 绑 | 
定 起 来 : 属性 值 colgroup， 表 示 将 单元 格 所 在 的 列 组 〈 由 <col> 或 <colgroup> 标 签 定义 ) 和 表 头 单元 格 | 
绑 定 起 来 。 | 
【示例 】 下 面 示例 将 两 个 也 元 素 标识 为 列 的 表 头 ， 将 两 个 td 元 素 标识 为 行 的 表 头 。 
<table border="1"> 
<tr> 
<th></th> 
<th scope="col"> 月 份 </th> | 
<th scope="col"> 金 额 </th> | 
</t> | 
<tr> 


<td scope="row">1</td> | 
<td>9</td> | 
<td>$100.00</td> 人 
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<td scope="row">2</td> 
| <td>4/td> 
优 | <td>$10.00</td> 
SA | 


Note BELS 


， 浴 提 示 : 由 于 scope 属性 不 会 在 普通 浏览 器 中 产生 任何 视觉 效果 ， 很 难 判 断 浏览 器 是 否 支持 它 。 


7.4.3 为 单元 格 指定 表 头 


| 使 用 headers 属性 可 以 为 单元 格 指定 表 头 ,该 属性 的 值 是 一 个 表 头 名 称 的 字符 串 ,这 些 名 称 是 用 id 
”属性 定义 的 不 同 表 头 单元 格 的 名 称 。 
| headers 属性 对 非 可 视 化 的 浏览 器 ， 也 就 是 那些 在 显示 出 相关 数据 单元 格 内 容 之 前 就 显示 表 头 单 
元 格 内 容 的 浏览 器 非常 有 用 。 

【示例 】 下 面 示例 分 别 为 表格 中 不 同 的 数据 单元 格 绑 定 表 头 ， 演 示 效 果 如 图 7.15 所 示 。 


<table border="1" width="100%"> 
<tr> 
<thid="name"> 姓 名 </th> 
<thid="Email"> 电 子 邮 </th> 
<thid="Phone"> 电 话 </th> 
<th id="Address"> 地 址 </th> 
</tr> 
<tr> 
<td headers="name"> 张 三 </td> 
<td headers="Email">zhangsan@163.com</td> 
<td headers="Phone">13522228888</td> 
<td headers="Address"> 北 京 长 安 街 38 号 </td> 
</tr> 
</table> 


DY localhosiestt hm x 


© | © localhost/testl.html 


电子 邮 电话 


hangsana163. com [L13522228888 比 京 长 安 街 38 号 


图 7.15 为 数据 单元 格 定义 表 头 


7.4.4 定义 信息 缩写 
首 


视频 讲解 | 使 用 abbr 属性 可 以 为 单元 格 中 的 内 容 的 定义 缩写 版 本 。abbr 属性 不 会 在 Web 浏览 器 中 产生 任何 
| 视觉 效果 方面 的 变化 ， 主 要 为 机 器 检索 服务 。 
| 【示例 】 下 面 示例 演示 了 如 何在 HTML 中 使 用 abbr 属性 。 


<table border="1"> 
<tr> 
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<th> 名 称 </th> 
<th> 说 明 </th> | 
</t> | 


<td abbr="HTML">HyperText Markup Language</td> | 侍 六 
<td> 超 级 文本 标记 语言 </td> | Bs 
> Note 
<tr> | 
<td abbr="CSS">Cascading Style Sheets</td> | 
<td> 层 释 样 式 表 </td> 
</t> 
</table> 


7.4.5 单元 格 分 类 


使 用 axis 属性 可 以 对 单元 格 进行 分 类 ， 用 于 对 相关 的 信息 列 进行 组 合 。 在 一 个 大 型 数据 表格 中 ， | 和 本 二 全 
表格 里 通常 塞 满 了 数据 ， 通 过 分 类 属性 axis， 浏 览 器 可 以 快速 检索 特定 信息 。 | 

axis 属性 的 值 是 引号 包括 的 一 列 类 型 的 名 称 , 这 些 名 称 可 以 用 来 形成 一 个 查询 。 例 如， 如 果 在 一 个 | 
食物 购物 的 单元 格 中 使 用 axis=meals， 浏 览 器 能 够 找到 那些 单元 格 ， 获 取 它 们 的 值 ， 并 且 计算 出 总 数 。 ， 

目前 ， 还 没有 浏览 器 支持 该 属性 。 

【示例 】 下 面 示例 使 用 axis 属性 为 表格 中 每 列 数据 进行 分 类 。 


<table border="1" width="100%"> 
<tr> 
<th axis="name"> 姓 名 </th> 
<th axis="Email"> 电 子 邮 </th> 
<th axis="Phone"> 电 话 </th> 
<th axis="Address"> 地 址 </th> 
</t> 
<tr> 
<td axis="name"> 张 三 </td> 
<td axis="Email">zhangsan@163.com</td> 
<td axis="Phone">13522228888</td> 
<td axis="Address"> 北 京 长 安 街 38 号 </td> 
</tr> 
</table> 


7.5 案例 实战 : 设计 CSS 禅 意 花园 


本 节 将 通过 拆 解 、 分 析 CSS 禅 意 花园 网 站 的 结构 , 帮助 读者 进一步 实践 HTMLS5 网 页 设计 的 基本 
方法 。 本 例 没有 涉及 表格 技术 ， 主 要 针对 前 面 几 章 的 基础 知识 做 一 次 阶段 性 集训 。 


7.5.1 网 站 预览 


CSS Zen Garden (http://www.csszengarden.com/) 是 Dave Shea 于 2003 人 
FE 创建 的 CSS 标准 推广 小 站 ， 但 就 是 这 么 一 个 小 站 却 闻名 全 球 ， 获 得 众多 。 权威 参考 


上 
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奖项 。 站 长 Dave Shea 是 一 位 图 像 设计 师 ， 致 力 于 推广 标准 Web 设计 。 

该 站 被 台湾 设计 师 薛 良 坛 和 李 士 杰 汉 化 为 中 文 繁体 版 之 后 ， 于 是 就 有 人 把 它 称 为 CSS 禅 意 花园 ， 
从 此 禅 意 花园 就 成 了 CSS Zen Garden 网 站 的 代名词 。CSS 禅 意 花园 早期 设计 效果 如 图 7.16 所 示 。 整 
个 页 面 通过 左上 、 右 下 对 顶 角 定义 背景 图 像 ， 这 些 荷花 、 梅 花 以 及 汉字 形体 修饰 配合 右上 顶 角 的 宗教 
建筑 ， 完 全 把 人 带 入 禅 意 的 后 花园 之 中 。 


[ES eas Ten Garden: The Beanty in CSS Dezign - Windows Internet Ezplorer 回回 四 
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Ademonstration ofwhat Litering a dark and dreary rvad lay the past relics of browserspecific tags 
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visally through css. Teday, we must dear the mind of past practices. Web enlightenment has been 
achievad thanks to the tiraless efforts of folk Hike the WaC, WaSP and the major 
baseddesign Selectany 
style sheetfrom the list to 


Toadit into this page. 


Download the sample 
and T 
1y a need for CSS to be taken serioosly by graphic artist The Zan 
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Ol 


图 7.16 CSS Zen Garden 早期 首页 设计 效果 


新 版 CSS 禅 意 花 园 去 除了 中 国 禅 意 元 素 ， 完 全 融入 响应 式 网 页 设计 风格 之 中 ， 界 面 趋 于 简洁 ， 
如 图 7.17 所 示 。 


De Omenon Dc| Oc sm me .| 
a = 


CSS ZEN GARDEN 


Ademonstration of what can be accomplished through css based design. Select 
MID CENTURY 
MODERN 


Download the example 起 HTML FILE and 半 css PILE Andrew Lohman 


any style sheet from (he list to oad it into his page. 


THE ROAD TO ENLIGHTENMENT GARMENTS 


Dan Ma 


Litlering a dark and dreary road lay the past relics of browser-specific tags, 
incompatible DOMS, broken Css support and abandoned browsers 


图 7.17 CSS Zen Garden 新 版 首页 设计 效果 
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整个 页 面 内 容 简单 、 结 构 单纯 、 样 式 也 很 朴实 。 仔 细 查 看 它 的 结构 ， 会 发 现 整个 页 面 的 信息 一 目 
了 然 ， 结 构 层次 清晰 明了 。 信 息 从 上 到 下 ， 按 着 网 页 标题 、 网 页 菜单 、 主 体 栏目 信息 、 次 要 导航 和 页 ， 
脚 信息 有 顺序 地 排列 在 一 起 ， 页 面 的 结构 如 图 7.18 所 示 。 | 


CSS Zen Garden 
The Beauty of CSS Design 


A demonstration of what can be accomplished through CSS-based design Select any style sheet from the list to Joad tinto this Page 
Downlond the example html flc and css file 
The Road to Enlightenment 
Linering a dak and dreary road lay the past relics of browser-specific tags, incompatible DOMSs, broken CSS support, and abandoned browsers 
Ved enlightenment has been achieved thanks to the tireless effocts of folk He the W3C. WaSP. and the major browser creators. 


to relax and medditate om the important lessons of the masters Begin to see with clanty. Learn to use the time-honored techniques in new and 
cb. 


cnconmagr parctpation To begin. wiew some of the existing deslgns in the 
the only thing that has changed is the extermal CSS flle. Yes, really. 


phcte and twin control ever the srle of shopertert docmmment. The only wey thin cen be Montsd in o wrey tet pets peophe exchcd is ty demonstting what 
en er hel te leeb ft ih cate ety Eerste Dale donk te em odd te i le 


Strong visual design has always been our fbcus You are rmodifying this Page so strong CSS shills are necessary too, bat the example files are commented well enough that 
even CSS novices can use them as starting points Please see the CSS Resource Guide ye ps on working with CSS. 


Yea may modify the style sheet in any way you wish but not the HITML This may scem dsonting at first if yon’ve never worked this way before, bot follow the listed hnky 


图 7.18 禁用 全 部 CSS 样式 后 的 首页 结构 


整个 页 面 没 有 一 幅 图 片 ， 这 是 完美 结构 的 基础 。CSS 禅 意 花园 的 标题 层级 明晰 ， 从 网 页 标题 (一 | 
级 标题 )、 网 页 副标题 〈 二 级 标题 ) 到 栏目 标题 〈 三 级 标题 ) 都 一 目 了 然 。 另 外 ， 段 落 信息 (P) 和 列 | 
表 信息 (ul) 占据 了 整个 页 面 信息 结构 。 从 SEO 设计 的 角度 来 考察 ， 我 们 可 以 看 到 Dave 把 所 有 导航 | 
菜单 等 功能 信息 全 部 放 在 结构 的 后 面 ， 很 值得 学 习 。 | 


7.5.2 设计 方法 


对 于 普通 网 站 来 说 , 一 般 页 面 都 会 存在 很 多 共同 的 信息 模块 , 例如 , 标题 (Logo)、 广告 (Bannem)、 | 
导航 (Mneu)、 功 能 (Serve)、 内 容 (Content) 和 版 权 〔Copyright) 等 信息 。 而 不 同类 型 的 网 站 有 不 | 
同 页 面 需求 ， 对 于 各 种 公共 信息 模块 的 取舍 会 略 有 不 同 ， 这 时 就 应 该 具体 情况 具体 分 析 。 在 设计 网 页 | 
基本 结构 时 ， 不 妨 根据 信息 需求 的 简单 分 析 和 信息 的 重要 性 来 对 页 面 各 个 模块 进行 适当 排序 ， 然后 设 | 
计 出 基本 的 框架 ， 例 如 : | 


<div class="wrapper"> <!-- 网 页 结构 外 套 --> 
<header role ="header"></ header> <!-- 网 页 标题 模块 --> 
<nav role="navigation"> </nav> <!-- 网 页 菜单 模块 -> 
<main role ="content"></main> <!-- 网 页 信息 模块 --> 
<aside role="complementary"></aside> <!-- 次 要 导航 模块 --> 
<footer></footer> <!-- 版 权 信息 模块 --> 
</div> 


构建 基本 结构 应 该 注意 以 下 几 个 问题 。 

回 ”在 设计 基本 框架 时 ， 应 优先 考虑 HTML5 新 结构 标签 ， 把 div 元 素 作为 最 后 的 备 选 。 | 

加 使 用 role CHIMLS5 新 增 属性 ) 增强 标签 的 语义 性 ， 告 诉 辅助 设备 〈 如 屏幕 阅读 器 ) 当前 元 ， 
素 所 扮演 的 角色 ， 以 增强 用 户 体 验 。 L 
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根据 需要 为 基本 结构 设置 id 和 class 属性 ， 作 为 钩子 ， 以 便 后 期 CSS 和 JavaScript 控制 。 
回 “可 以 考虑 为 整个 页 面 结构 设计 一 个 外 套 ， 以 便 统一 样式 。 
| 加 “在 设计 结构 时 ， 不 要 考虑 后 期 呈现 ， 也 不 要 顾虑 结构 的 顺序 是 不 是 会 影响 页 面 的 显示 ， 从 纯 
会 内 | 语义 化 的 角度 来 设计 基本 框架 。 
~ 有 了 基本 的 框架 结构 ， 可 以 继续 深入 ， 这 时 不 妨 去 完善 主体 区 域 的 结构 〈 即 网 页 内 容 模块 )， 这 
部 分 是 整个 页 面 的 核心 ， 也 是 思考 的 重点 。 
| 加” 此 时 ， 该 不 该 考虑 页 面 显示 效果 问题 ? 
回 ”如何 更 恰当 地 柑 套 结构 ? 
回 ”如何 处 理子 模块 的 结构 关系 ? 
在 编辑 网 页 结构 的 全 部 过 程 中 ， 不 要 去 考虑 页 面 显示 效果 问题 ， 而 是 静 下 心 来 单纯 地 考虑 结构 。 
| 但 是 在 实际 操作 中 ， 又 会 不 可 避免 地 联想 到 页 面 的 显示 问题 ， 例 如 ， 分 几 行 几 列 显示 〈 这 里 的 行 和 列 
| 是 指 网 页 基本 结构 的 走向 )。 不 同 的 行列 结构 肯定 都 有 适合 自己 的 结构 ， 所 以 当 读 者 在 进入 到 这 一 步 
| 时 ， 适 当 考虑 页 面 显 示 问 题 也 无 可 厚 非 ， 但 是 不 要 考虑 得 过 多 。 
| “恰当 的 堪 套 结构 需要 结合 具体 的 信息 来 说 ， 这 里 先 暂 不 详细 分 析 。 抽 象 地 说 ， 模 块 的 结构 关系 可 
”以 分 为 3 种 基本 模型 。 
1. 平行 结构 
<div id="A"></div> 
<div id="B"></div> 
<div id="C"></div> 


2. 包含 结构 
<div id="A"> 
<div id="B"></div> 


<div id="C"></div> 
</div> 


<div id="A"></div> 
<div> 
<div id="B"></div> 
<div id="C"></div> 
</div> 
| 具体 采用 哪 种 结构 都 不 重要 ， 可 以 根据 信息 的 结构 关系 来 进行 设计 。 如 果 <div id="latest"> 和 <div 
| id="m2"> 两 个 信息 模块 内 容 比较 接近 ， 而 <div id="subcol"> 模 抉 与 它们 在 内 容 上 相差 很 远 ， 不 妨 采用 
| | 嵌 套 结构 。 如 果 这 些 栏目 的 信息 类 型 雷同 ， 使 用 并 列 式 会 更 经 济 。 


7.5.3 ”设计 思路 


禅 意 花园 犹如 一 篇 散文 ， 整 个 页 面包 含 以 下 3 部 分 。 
1. 站 点 介绍 
站 点 介绍 部 分 犹如 抒情 散文 ， 召 唤 你 赶紧 来 加 入 CSS 标准 设计 中 ， 该 部 分 包含 3 块 。 
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加 标题 ， 包 括 网 站 主 副标题 。 
回 “概述 ， 呼 唤 网 友 赶紧 加 入 进来 。 


回 序言 ， 回 忆 和 总 结 当前 标准 之 路 的 艰巨 性 和 紧迫 性 。 

2. 支持 文本 | 

支持 文本 部 分 犹如 叙事 散文 , 娓 娓 道 来 , 详细 介绍 活动 的 内 容 ， 用 户 参与 的 条 件 、 支持 、 好 处 等 。 
文王 什 记 9? Note 

回 这 是 什么 ? 

回 ” 邀 您 参与 。 

回 ”参与 好 处 。 

回 ”参与 要 求 。 

另外 末尾 还 包含 了 各 种 技术 参考 网 站 。 

3. 链接 信息 

链接 信息 部 分 很 简洁 地 列 出 了 所 有 超 链接 信息 。 该 部 分 也 包含 3 块 链接 信息 。 


7.5.4 构建 基本 框架 


根据 信息 进行 分 类 ， 然 后 根据 分 类 进行 分 块 ， 下 面 就 可 以 来 建立 禅 意 花园 的 基本 框架 ; 网 页 包 
框 下 面包 含 了 3 个 平行 的 结构 。 


落 


<div class="page-wrapper"> <!-- 网 页 结构 外 套 --> 
<section class="intro" id="zen-intro"></section> <!-- 站 点 介绍 --> 
<div class="main supporting" id="zen-supporting" role="main"></div> ”<!-- 支持 文本 --> 
<aside class="sidebar" role="complementary"></aside> <!-- 链接 列表 --> 
</div> 


继续 拓展 结构 ， 完 成 三 级 基本 结构 的 设计 。 


<div class="page-wrapper"> 
<section class="intro" id="zen-intro"> 
<!-- 网 页 标题 信息 块 --> 
<header role="banner"></header> 
<!-- 概述 --> 
<div class="summary" id="zen-summary" role="article"></div> 
<!-- 序言 -> 


<div class="preamble" id="zen-preamble" role="article"></div> 


</section> 
<div class="main supporting" id="zen-supporting" role="main"> 
<!-- 这 是 什么 ? --> 
<div class="explanation" id="zen-explanation" role="article"></div> 
<!-- 邀 您 参与 -> 
<div class="participation" id="zen-participation" role="article"></div> | 
<!-- 参与 好 处 -> | 
<div class="benefits" id="zen-benefits" role="article"></div> | 
<!-- 参与 要 求 -> | 


<div class="requirements" id="zen-requirements" role="article"></div> 
<!-- 各 种 技术 参考 网 站 --> 
<footer></footer> 
</div> 
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和 Ws 
[> 
Eh 
<aside class="sidebar" role="complementary"> 

<!-- 内 嵌 包 含 框 -> 
<div class="wrapper"> 
<!-- 优秀 作品 列表 --> 
<div class="design-selection" id="design-selection"></div> 
<!-- 存档 列表 -> 
<div class="design-archives" id="design-archives"></div> 
ote <!- 资源 链接 信息 --> 
<div class="zen-resources" id="zen-resources"></div> 
| </div> 
| </aside> 
</div> 
在 构建 基本 结构 时 ， 应 该 考虑 SEO 设计 ， 把 重要 信息 放 在 前 面 ， 而 对 于 功能 性 信息 放 在 结构 的 
未 尾 ， 


7.5.5 完善 网 页 结构 


频 讲 解 | 禅 意 花园 的 结构 非常 简洁 ， 主 要 使 用 了 section、header、footer、nav、hl、h2、h3、p、ul、li、a、 
| abbr、span 元 素 ， 语 义 明晰 ， 没 有 宛 余 的 标签 和 无 用 的 嵌 套 结构 。 具 体 分 析 如 下 。 
| (1) 首先 看 一 下 标题 信息 : 标题 使 用 恰当 ， 层 次 清晰 。 例 如 ， 在 标题 栏 header 中 ， 使 用 hl 和 
| 12 定义 网 站 标题 ， 以 及 描述 信息 。 
| <header role="banner"> 
<hl>CSS Zen Garden</hl> 


<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2> 
</header> 


然后 ， 在 下 面 各 个 子 栏目 中 ， 使 用 h3 定义 子 栏目 标题 ， 例 如 : 


<div class="preamble" id="zen-preamble" role="article"> 
<h3>The Road to Enlightenment</h3> 
<p>...</p> 
<p>...</p> 
<p>.…</p> 
</div> 
| 上 面 是 “序言 ” 子 栏目 的 标题 ， 下 面 跟随 3 段 广 本， 设计 了 一 个 子 文章 块 。 后面 的 各 个 子 栏目 设 
| 计 都 遵循 这 样 的 结构 和 思路 。 
| 一 般 网 页 只 能 够 有 一 个 一 级 标题 , 用 于 网 页 题目 , 然后 根据 结构 的 层次 关系 有 序 使 用 不 同 级 别 标 
| 题 ， 这 一 点 很 多 设计 师 都 忽略 了 。 从 SEO 的 角度 来 考虑 ， 合 理 使 用 标题 是 非常 重要 的 ， 因 为 搜索 引 
| 擎 对 于 不 同 级 别 标题 的 敏感 性 是 不 同 的 ， 级 别 越 大 ， 检 索 的 机 会 就 越 大 。 
(2) 再 来 看 一 下 footer 信息 ， 代 码 如 下 。 
<footer> 
| <a href="http://validator.w3.org/check/referer" title="Check the validity of this site&#8217;s HTIML" 
| class="zen-validate-html">HTML</a> 
| <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site&#8217:s CSS" 
| class="zen-validate-css">CSS</a> 


<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View the Creative Commons license of this 
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site: Attribution-NonCommercial-ShareAlike." class="zen-license">CC</a> | 
<a href="http://mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site" class= | 
"zen-accessibility">Ally</a> | 
<a href="https://github.com/mezzoblue/csszengarden.com" title="Fork this site on Github" class="zen- | 
github">GH</a> 
</footer> | 


整个 版 面 除了 必要 的 链接 文本 外 , 没有 任何 多 余 的 标签 ,每 个 超 链接 包含 必要 的 href. tite 和 class 
属性 ， 比 较 简洁 。 用 户 可 以 根据 页 面 风格 来 设计 footer 信息 的 样式 和 位 置 ， 默 认 效 果 如 图 7.19 所 示 。 


sszengardercom 


Dave Shea 


mediatemple Zen Garden, the 


book. 


图 7.19 版 权 信息 图 标 
(3) 导航 列表 信息 使 用 nav 定义 ， 包 含 在 ul 列表 中 ， 例 如 : 


<div class="design-archives" id="design-archives"> | 
<h3 class="archives">Archives:</h3> | 
<nav role="navigation"> | 
<u> | 
<li class="next"> | 
<a href="/214/pagel">Next Designs <span class="indicator">&rsaquo:;</span></a> | 
< 人 > | 
<li class="viewall"> | 
<a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to 
the Zen Garden."> View All Designs</a> | 
</> 
</ul> 
</nav> 
</div> 


页 面 中 还 有 多 处 类 似 结构 ， 不 再 一 一 列举 。 
(4) 禅 意 花 
用 a 来 定义 文本 内 超 链接 信息 ， 在 超 链接 中 添加 了 提示 文本 ， 例 如 : | 


ED 


把 正文 版 式 设计 得 精简 至 极 ， 总 共 使 用 了 a、span 和 abbr 3 个 行内 元 素 。 其 中 使 | 


<a href="/examples/index" title="This page's source HTML code, not to be modified.">html file</a> 
使 用 span 为 部 分 文本 定义 样式 类 ， 例 如 : 

<a href="/214/pagel">Next Designs <span class="indicator">&rsaquo;</span></a> 
使 用 abbr 截取 首 字母 缩写 ， 例 如 : 

<abbr title="Cascading Style Sheets">CSS</abbr> 


人 


二 人 沿用 这 


Note 


可 以 扫 码 强化 练习 。 
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由 于 页 面 结构 主要 提供 基本 文字 信息 , 因此 作者 没有 使 用 img 元 素 在 结构 中 嵌入 图 像 ， 如 果 用 户 


需要 图 像 来 装饰 页 面 ， 仅 使 用 CSS 即 可 ， 不 必 破 坏 文档 结构 。 


在 设计 版 式 结构 中 ， 标 准 设计 的 一 般 原则 如 下 。 

包含 信息 的 图 像 应 该 使 用 img 元 素 插入 ， 如 新 闻 图 片 、 欣 赏 性 质 的 图 像 ， 传 递 某 种 信息 的 图 
案 、 图 示 等 。 

不 包含 任何 有 用 的 信息 ， 仅 负责 页 面 版 式 或 功能 的 修饰 ， 则 应 该 以 背景 图 像 的 方式 显示 。 

(5) 网 站 为 了 方便 设计 师 艺术 设计 ， 特 意 在 文档 尾部 预 留 了 6 个 div 结构 接口 。 


<div class="extral" role="presentation"></div> 
<div class="extra2" role="presentation"></div> 
<div class="extra3" role="presentation"></div> 
<div class="extra4" role="presentation"></div> 
<div class="extra5" role="presentation"></div> 
<div class="extra6" role="presentation"></div> 


这 些 多 余 的 div 作为 备用 结构 标签 ， 最 初 提供 的 目的 是 : 方便 设计 师 增 加 额外 信息 ， 它 们 相当 于 


入 的 接口， 如 果 不 用 可 以 隐藏 


但 是 随 着 CSS3 功能 的 完善 ， 我 们 完全 可 以 使 用 ::before 和 ::after 伪 对 象 进行 支持 ， 因 此 不 再 建议 


ER 这 些 只 保留 历史 设计 的 兼容 性 ， 未 来 会 被 作者 删除 。 


7.6 在 线 练 习 


本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HIMLS 设计 表格 结构 和 样式 。 感 兴趣 的 同学 


在 线 纺 习 1 1 在 线 练习 2 
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设计 表单 


表单 为 访问 者 提供 了 与 网 站 进行 交流 的 途径 。 表 单 有 两 个 基本 组 成 部 分 : 访问 者 在 页 面 
上 可 以 看 见 并 填写 的 控件 、 标 签 和 按钮 ， 以 及 用 于 获取 表单 信息 的 处 理 脚本 。 本 章 主要 介绍 
如 何 创 建 表单 


【 学 习 重 点 】 
WI 创建 表单 
创建 文本 杠 、 密 码 框 、 电 子 邮 件 杠 、 文 本 区 域 等 各 种 输入 杠 


创建 单 选 按 备 、 复 选 框 、 提 交 按 钮 、 选 择 框 等 各 种 交互 控件 
对 表单 元 素 进 行 组 织 


至 至 于 
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8.1 认识 HIMLS 表单 


HTML5 Web Forms 2.0 (http://www.w3.org/Submission/web-forms2/) 对 HTML4 表单 进行 全 面 升 
区 (2 天 级 ， 在 保持 原 有 简便 易 用 的 特性 基础 上 ， 增 加 了 许多 内 置 控 件 、 属 性 ， 以 满足 用 户 的 设计 需求 。 通 过 
访问 https://caniuse.com/ 可 以 了 解 浏览 器 对 HIMLS Web Forms 2.0 的 支持 情况 。 
HTMLS 新 增 输入 型 表单 控件 如 下 。 
加 ”电子 邮件 框 : <input type="email">。 
回 “搜索 框 : <input type="search">。 
回 ”电话 框 : <input type="tel">。 
加 ”URL 框 : <input type="url">。 
以 下 控件 得 到 了 部 分 浏览 器 的 支持 ， 更 多 信息 参见 www.wufoo.conyhtml5。 
日 期 : <input type="date">， 浏 览 器 支持 : https://caniuse.com/#feat=input-datetime。 
数字 : <input type="number">， 浏 览 器 支持 : https://caniuse.com/#feat=input-number。 
范围 : <input type="range">， 浏 览 器 支持 : https://caniuse.com/#feat=input-range。 
数据 列表 : <input type="text" name="favfruit" list="fruit" /> 
<datalist 1d="fruit"> 

<option> 备 选 列表 项 目 1</option> 

<option> 备 选 列表 项 目 2</option> 
| <option> 备 选 列 表 项 目 3</option> 
| </datalist> 

下 面 控件 或 者 元 素 在 最 终 规范 出 来 之 前 争议 较 大 ， 浏 览 器 厂商 对 其 支持 也 不 统一 ，W3C 曾经 指 

出 它们 在 2014 年 定案 之 时 很 可 能 不 会 列 入 HTML5， 但 是 最 终 还 是 相互 妥协 ， 保 留 了 下 来 。 
颜色 : <input type="color" />。 
全 局 日 期 和 时 间 : <input type="datetime" />。 
局 部 日 期 和 时 间 : <input type="datetime-local" />。 
月 : <input type="month" />。 
时 间 : <input type="time" />。 
周 : <input type="week" />。 
输出 : <output></output>。 
HTMLS5 新 增 的 表单 属性 如 下 。 
accept: 限制 用 户 可 上 传 文件 的 类 型 。 
autocomplete: 如 果 对 form 元 素 或 特定 的 字段 添加 autocomplete="off',， 就 会 关闭 浏览 器 对 该 
表单 或 该 字段 的 自动 填写 功能 ， 默 认 值 为 on。 
autofocus: 页 面 加 载 后 将 焦点 放 到 该 字段 。 
multiple: 允许 输入 多 个 电子 邮件 地 址 ， 或 者 上 传 多 个 文件 。 
list: 将 datalist 与 input 联系 起 来 。 
maxlength: 指定 textarea 的 最 大 字符 数 ， 在 HIMLS 之 前 的 文本 框 就 支持 该 特性 。 
pattem: 定义 一 个 用 户 所 输入 的 文本 在 提交 之 前 必须 遵循 的 模式 。 


图 图 图 加 


图 图 图 图 图 图 图 图 图 


图 图 图 图 加 
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placeholder: 指定 一 个 出 现在 文本 框 中 的 提示 文本 ， 用 户 开始 输入 后 该 文本 消失 。 | 
required: 需要 访问 者 在 提交 表单 之 前 必须 完成 该 字段 。 
formnovalidate: 关闭 HIMLS 的 自动 验证 功能 。 应 用 于 提交 按钮 。 | 
novalidate: 关闭 HIMLS 的 自动 验证 功能 。 应 用 于 表单 元 素 。 | 


示 : 访问 https://github.com/ryanseddon/H5F， 下 载 JavaScript 插件 可 以 为 旧 的 浏览 器 提供 模仿 ， 
HTMLS5 表单 行为 的 一 般 方法 。 


间 回回 回回 
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视频 讲解 


表单 结构 一 般 都 以 <form> 开 始 ， 以 </form> 结 束 。 两 个 标签 之 间 是 组 成 表单 的 标签 、 控 件 和 按钮 。| 
访问 者 通过 提交 按钮 提交 表单 ， 填 写 的 信息 就 会 发 送 给 服务 器 。 | 
hoes 例 1】 新 建 HTML5 文档 ， 保 存 为 testhtml， 在 <body> 内 使 用 <form> 标 签 包含 两 个 <input> 标 | 
一 个 提交 按钮 ， 并 使 用 <p> 标 签 将 按钮 和 文本 框 分 行 显示 。 
<h2> 会 员 登 录 </h2> 
<form action="#" method="get" id="forml" name="forml"> 
<p> 会 员 : <input name="user" id="user" type="text" /></p> 
<p> 密 码 : <input name="password" id="password" type="text" /></p> 
<p><input type="submit" value=" 登 录 "/></p> 
</form> 
form 开始 标签 可 以 有 一 些 属性 ， 其 中 最 重要 的 就 是 
action 和 method。 将 action 属性 的 值 设 为 访问 者 提交 表单 时 
服务 器 上 对 数据 进行 处 理 的 脚本 的 URL。 例 如 ，action= 


"save-info.php"。 


tipViccahho- > BO | Blocalhost 


不 


会 
会 


惧 


method 属性 的 值 要 么 是 get， 要 么 是 post。 大 多 数 情况 
下 都 可 以 使 用 post， 不 过 每 种 方法 都 有 其 用 途 ， 了 解 其 用 途 ”| 
有 助 于 理解 它们 。 在 正 浏览 器 中 预览 ， 演 示 效 果 如 图 8.1 图 8.1 表单 的 基本 效果 
所 示 。 


<form> 标 签 包 含 很 多 属性 ， 其 中 HTMLS5 支持 的 属性 如 表 8.1 所 示 。 
表 8.1 HTML5 支持 的 <form> 标 签 属性 


展 性 什 说 明 
accept-charset charset list 规定 服务 器 可 处 理 的 表单 数据 字符 集 | 
action URL 规定 当 提交 表单 时 向 何 处 发 送 表单 数据 | 
autocomplete on、o 仓 规定 是 否 启用 表单 的 自动 完成 功能 | 
enctype 参考 下 面 说 明 规定 在 发 送 表 单数 据 之 前 如 何 对 其 进行 编码 | 
method get、post 规定 用 于 发 送 form-data 的 HTTP 方法 
name form name 规定 表单 的 名 称 | 
novalidate novalidate 如 果 使 用 该 属性 ， 则 提交 表单 时 不 进行 验证 
target _blank、_self、_parent top、framename | 规定 在 何 处 打开 action URL | 
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【示例 2】 下 面 是 一 个 简单 的 用 户 登录 表单 。 


<form method="post" action="show-data.php"> 
<!-- 各 种 表单 元 素 -> 


食 人 中 <fieldset> 


<h2 class="hdr-account"> 登 录 </h2> 


"fields"> 


<p class="row"> 


Note <div class= 


<label for="first-name"> 用 户 名 :</label> 


<input type="text" 1d="first-name" name="first_ name" class="field-large" /> 


</p> 


<p class="row"> 
<label for="last-name"> 昵 称 :</label> 
<input type="text" id="]ast-name" name="last_name" class="field-large" /> 


</p> 
</div> 
</fieldset> 


<!-- 提交 按钮 --> 
<input type="submit" value=" 提 交 " class="btn" /> 


</form> 


| 这 提示 : 如 果 对 表单 使 用 method-"get"， 于 么 表单 提交 后 ， 表单 中 的 数据 会 显示 在 浏览 器 的 地 址 栏 


里 。 通 常 ， 


如 果 希 望 表单 提交 后 从 服务 器 得 到 信息 ， 就 使 用 get。 例如， 大 多 数 搜索 引擎 


都 会 在 搜索 表单 中 使 用 get 提交 表单 ， 搜 索引 擎 会 得 到 搜索 结果 。 由 于 数据 出 现在 URL 
中 ， 因 此 用 户 可 以 保存 搜索 查询 ， 或 者 将 查询 发 给 朋友 。 

如 果 对 表单 使 用 method="post"， 那 么 提交 表单 后 ， 表 单 中 的 数据 不 会 显示 在 浏览 器 的 地 
址 栏 里 ， 这 样 更 为 安全 。 同 时 ， 比 起 get， 使 用 post 可 以 向 服务 器 发 送 更 多 的 数据 。 通 
常 ，post 用 于 向 服务 器 存 入 数据 ， 而 非 获 取 数 据 。 因此， 如 果 需 要 在 数据 库 中 保存 、 添 
加 和 删除 数据 ， 就 应 选择 post。 例 如 ， 电 子 商务 网 站 使 用 post 保存 密码 、 邮 件 地 址 以 及 
其 他 用 户 输入 的 信息 。 通 常 ， 如 果 不 确定 使 用 哪 一 种 ， 就 使 用 post， 这 样 数据 不 会 暴露 


在 URL 中 


表单 从 访问 者 那 时 
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收集 信息 ,最 终 还 需要 把 收集 的 信息 发 送 给 服务 器 ,这 个 操作 过 程 就 是 提交 表 


| 单 ， 涉 及 两 个 技术 ;表单 验证 和 数据 处 理 。 

| 表单 验证 指 的 是 提交 表单 时 ， 对 用 户 输入 的 每 个 字段 的 内 容 进行 检查 ， 看 是 否 符合 预期 的 格式 。 
”例如 ， 对 于 电子 邮件 字段 ， 检 查 输入 是 否 为 正确 的 电子 邮件 地 址 格式 。 

| 表单 验证 的 任务 可 以 归纳 下 面 几 种 类 型 。 


必 填 检查 。 
范围 校 验 。 
比较 验证 。 
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加 ”格式 验证 。 
回 “特殊 验证 。 | 
必 填 检查 是 最 基本 的 任务 。 常 规 设计 中 包括 3 种 状态 : 输入 框 获 取 焦 点 提示 ; 输入 框 失去 焦点 验 | 
证 错误 提示 ; 输入 框 失 去 焦点 验证 正确 提示 。 首 先 确定 输入 框 是 否 是 必 填 项 ， 然 后 就 是 提示 消息 的 显 | 天 站 
示 位 置 。 ee 
范围 校 验 稍微 复杂 一 些 ， 在 校 验 中 需要 做 如 下 区 分 : 输入 的 数据 类 型 为 字符 串 、 数 字 和 时 间 。 如 国有 克 
果 是 字符 串 ， 则 比较 字符 串 的 长 短 ， 对 数字 和 时 间 ， 则 比较 值 的 大 小 。 | 
比较 验证 相对 简单 ， 无 须 考虑 输入 内 容 ， 只 需要 引入 一 个 正则 表达 式 即 可 。 
格式 验证 和 特殊 验证 都 必须 通过 正则 表达 式 才能 够 完成 。 | 
有 的 HTML5 表单 元 素 有 内 置 的 验证 功能 ， 表 单 验证 一 般 在 客户 端 使 用 JavaSeript 脚本 完成 , 出 ， 
于 安全 性 考虑 ， 特 殊 值 验证 需要 在 服务 器 端 执行 ， 如 注册 的 用 户 名 是 否 存在 ， 用 户 输入 密码 是 否 正 
确 等 。 
数据 处 理 主要 在 服务 器 端 完 成 ,服务 器 端 脚本 可 以 将 信息 记录 到 服务 器 上 的 数据 库 里 , 通过 电子 | 
邮件 发 送信 息 ， 或 者 执行 很 多 其 他 的 功能 。 | 
对 于 刚 起 步 的 读者 来 说 , PHP 是 一 个 不 错 的 选择 , 因为 用 它 处 理 一 些 常见 任务 很 简单 .除了 PHP， 
还 可 以 选择 其 他 语言 ， 如 Diango、Ruby、ASPNET、JSP 等 。 | 
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使 用 <fieldset> 标 签 可 以 组 织 表单 结构 ,为 表单 对 象 进行 分 组 ,， 这样 表单 会 更 容易 理解 。 在 默认 状 | 
态 下 ， 分 组 的 表单 对 象 外 面 会 显示 一 个 包围 框 。 | 

使 用 <legend> 标 签 可 以 定义 每 组 的 标题 ,描述 每 个 分 组 的 目的 ， 有 时 这 些 描述 还 可 以 使 用 hl~h6 | 
标题 。 默 认 显示 在 <fieldset> 包 含 框 的 左上 角 。 

对 于 一 组 单 选 按钮 或 复 选 框 ， 建 议 使 用 <fieldset> 把 它们 包 庄 起 来 ， 为 其 添加 一 个 明确 的 上 下 文 ， 
让 表单 结构 显得 更 清晰 。 

【示例 】 本 例 编 写 一 个 复杂 的 表单 结构 ， 设 计 一 个 网 站 调查 页 面 。 在 表单 结构 中 为 2 个 表单 部 分 
分 别 使 用 fieldset， 同 时 为 其 添加 了 一 个 legend 元 素 ， 用 于 描述 分 组 的 内 容 。 效 果 如 图 8.2 所 示 。 

<h1> 网 站 小 调查 </h1> 


<form action="#" class="forml"> 
<fieldset class="fld1"> 
<legend> 个 人 信息 </legend> 
<p><label for="name"> 姓 名 </label><input id="name"></p> 
<p><label for="address"> 地 址 </label><input id="address"></p> 
<p><label for="sex"> 性 别 </label> 
<select id="sex"> 
<option value="female"> 女 </option> 
<option value="male"> 男 </option> 
</select> 
Ap> 
</fieldset> 
<hr> 
<fieldset class="fld2"> 
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<legend> 其 他 信息 </legend> 
<p><fieldset> 
<legend> 你 喜欢 什么 运动 ?</legend> 
<label for="football"> 
<input id="football" name=“yundong” type="checkbox"> 足 球 </label> 
<label for="basketball"> 
<input id="basketball" name=“yundong” type="checkbox"> 篮 球 </label> 
<label for= "ping"> 
<input id="ping" name=“yundong” type="checkbox"> 乒 乓 球 </label> 
</fieldset></p> 
<p><fieldset> 
<legend> 请 写 下 你 的 建议 ? </legend> 
<label for="comments"> 
<textarea id="comments" rows="7" cols="25"></textarea></label> 
</fieldset></p> 


</fieldset> 
<input value=" 提 交 个 人 信息 " type="submit"> 
</form> 


用 户 信息 登录 
个 人 信息 


姓名 [ 


地 址 [ 


性 别 区 局 


其 他 信息 


你 喜欢 什么 运动 ? 
口 足球 口 篮球 口 兵 乓 球 


| 博 写 下 你 的 建议 ? 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| .eraroonorm -sc| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


图 8.2 设计 表单 结构 分 组 


| legend 可 以 提高 表单 的 可 访问 性 。 对 于 每 个 表单 字段 , 屏幕 阅读 器 都 会 将 与 之 关联 的 legend 文本 
| 念 出 来 ， 从 而 让 访问 者 了 解 字段 的 上 下 文 。 这 种 行为 在 不 同 的 屏幕 阅读 器 和 浏览 器 上 并 不 完全 一 样 ， 
不 同 的 模式 下 也 不 一 样 。 因 此 可 以 使 用 hl1~h6 标题 代替 legend 来 识别 一 些 fieldset。 但 是 对 于 单 选 按 
， 钮 ， 建 议 使 用 fieldset 和 legend。 


8.5 定义 文本 杠 
非 标 准 化 的 短信 息 ， 应 该 建议 用 户 输入 ， 而 不 是 让 用 户 选择 ， 如 姓名 、 地 址 、 电 话 等 。 使 用 输入 
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框 收集 会 比 使 用 选择 的 方式 收集 更 加 简便 、 宽 容 。 
文本 框 是 用 户 提交 信息 最 主要 的 控件 ， 定 义 方法 如 下 。 | 


第 一 种 方式 : <input 亡 

第 二 种 方式 : <input type="" 这 

第 三 种 方式 : <input type="text" /> 

遵循 HTML 标准 ， 推 荐 第 三 种 方式 定义 文本 框 。 | 

【示例 】 下 面 示例 使 用 HTMLS 新 增 的 13 种 类 型 文本 框 ， 定 义 了 一 个 表单 页 面 ， 比 较 不 同类 型 | 
文本 框 的 显示 效果 ， 如 图 8.3 所 示 ， 表 单 结构 代码 如 下 。 


<form action="#"> 

<fieldset> 
<legend> 输 入 型 文本 框 </legend> | 
<label for="email">email</label> | 
<input type="email” name="email" id="email" /> | 
<label for="url">url</label> | 
<input type="url" name="url” id="url” /> | 
<label for="number">number</label> | 
<input type="number" name="number"id="number" step="3"/> | 
<label for="tel">tel</label> | 
<input type="tel” name="tel” id="tel” /> | 
<label for="search">search</label> 
<input type="search" name="search" id="search" /> 
<label for="range">range</label> 
<input type="range" name="range" id="range" value="100" min="0" max="300" 人 > 
<label for="color">color</label> | 
<input type="color" name="color” id="color” /> | 

</fieldset> | 

<fieldset> 
<legend> 日 期 时 间 型 文本 框 </legend> | 
<label for="time">time</label> | 
<input type="time" name="time" id="time” /> 
<label for="date">date</label> | 
<input type="date"” name="date” id="date” /> | 
<label for="month">month</label> | 
<input type="month" name="month" id="month” 广 | 
<label for="week">week</label> | 
<input type="week" name="week" id="week" /> | 
<label for="datetime">datetime</label> 
<input type="datetime" name="datetime" id="datetime"” /> 
<label for="datetime-local">datetime-local</label> 
<input type="datetime-local” name="datetime-local"” id="datetime-local” /> 


</fieldset> | 

<input ”type="submit” ”value=" 提 交 " 亡 | 

</form> | 

在 上 面 代 码 中 ， 为 每 个 文本 框 设 置 name 和 id 属性 ，name 是 提交 数据 的 句柄 ，id 是 JavaScript 

和 CSS 控制 句柄 ， 或 者 作为 for 的 绑 定 目标 。 只 有 在 希望 为 文本 框 添加 默认 值 的 情况 下 才 需 要 设置 | 
value 属性 。 | 
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Datetime 


Datetime-Local 
年 /月 /日 一 :一 


图 8.3 比较 不 同类 型 的 输入 文本 杠 
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| 使 用 <label> 标 签 可 以 定义 表单 对 象 的 提示 信息 。 通过 for 属性 , 可 将 提示 信息 与 表单 对 象 绑 定 在 一 
| 起。 设计 方法 : 设置 for 属性 值 与 一 个 表单 对 象 的 id 的 值 相同 ， 这 样 label 就 与 该 对 象 显 式 地 关联 起 来 。 
当 用 户 单 击 提示 信息 时 ， 将 会 激活 对 应 的 表单 对 象 。 这 对 提升 表单 的 可 用 性 和 可 访问 性 都 有 帮助 。 


， 洲 提 示 : 如 果 不 使 用 for 属性 ， 通 过 <label> 标 签 包含 表单 对 象 ， 也 可 以 实现 相同 的 设计 目的 。 
【示例 】 本 例 针 对 8.2 节 示例 使 用 label 定义 提示 标签 ， 提 升 用 户 体验 。 新 优化 后 的 表单 结构 如 下 。 


<hl> 会 员 登 录 </hl> 
<form action="#" method="get" id="forml" name="forml"> 
<p class="row"> 
<label for="name"> 会 员 <span class="required">*</span></label> 
<input type="text" id="name" name="name" required="required" aria-required="true" /> 
p> 
<p class="row"> 
<label for="password"> 密 码 <span class="required">*</span></label> 
<input type="password" id="password" name="password" required="required" aria-required="true" /> 
</p> 
<p class="row center"><input type="submit" value=" 登 录 "/> </p> 
</form> 


然后 使 用 CSS 为 标签 添加 样式 ， 让 表单 变 得 更 方便 使 用 和 更 好 看 。 


label {/* 标签 样式 */ 
cursor: pointer; 
display: inline-block: 
padding: 3px 6px; 
text-align: right:; 
width: 80px: 
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vertical-align: top; 
} 


素 。 使 用 “vertical-align: top;” 让 标签 与 相关 的 表单 字段 对 齐 ， 设 计 效 果 如 图 8.4 所 示 。 


P| S hrpy//ccalhost es ~ S| iocahost 


图 8.4 添加 提示 文本 


for 属性 关联 还 可 以 让 屏幕 阅读 器 将 文本 标签 与 相应 的 字段 一 起 念 出 来 。 这 对 不 了 解 表单 字段 仿 
义 的 视 障 用 户 来 说 是 多 么 重要 。 出 于 这 些 原因 ， 建 议 用 户 在 label 元 素 中 包含 for 属性 。 | 


8.7 使 用 常用 控件 


表单 控件 。 
8.7.1 密码 杠 


密码 框 是 一 种 特殊 用 途 的 文本 框 , 专门 输入 密码 , 通过 type="password" 定 义 ， 输 入 的 字符 串 以 贺 
点 或 星 号 显示 ， 和 避免 信息 被 身边 的 人 看 到 ， 用 户 输入 的 真实 值 会 被 发 送 到 服务 器 ， 且 在 发 送 过 程 中 没 | 


有 加 密 。 


入 框 两 个 对 象 ， 演 示 效 果 如 图 8.5 所 示 。 


<form> 
<fieldset> 
<legend> 快 速 注册 </legend> 
<p class="row"><label for="name"> 用 户 名 </label> 
<input type="text" id="name" name="name" 放 
<p> 
<p class="row"><label for="email">Email</label> 
<input type="email" id="email" name="email" placeholder="name(@163.com" /> 
<p> 
<p class="row'"><label for="password"> 密 码 </label> 
<input type="password" id="password" name="password" /> 
<p> 
<p class="row"><label for="password2"> 重 置 密码 </label> 
<input type="password" id="password2" name="password2" /> 
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定义 “cursor: pointer;”， 当 访问 者 指向 标签 时 ， 显 示 为 手 形 就 能 提示 用 户 这 是 一 个 可 以 操作 的 元 


前 面 介绍 了 文本 输入 框 控 件 的 基本 使 用 , 它 也 是 最 常用 的 表单 对 象 ， 下 面 再 介绍 另外 几 个 常用 的 


【示例 】 下 面 示例 设计 一 个 简单 的 用 户 注册 表单 页 面 , 使 用 密码 框 设计 密码 输入 框 和 重 置 密 码 输 
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<p> 
</fieldset> 
<input type="submit" value=" 提 交 " 亡 
</form> 


| ss mo/ocatosnes + So 
Note 有 


图 8.5 设计 用 户 注册 表单 页 面 


8.7.2 ” 单 选 按钮 


频 讲 解 | 使 用 <input type="radio"> 可 以 定义 单 选 按钮 ， 多 个 name 属性 值 相同 的 单 选 按钮 可 以 合并 为 一 组 ， 
| 称 为 单 选 按钮 组 。 在 单 选 按钮 组 中 ， 只 能 选择 一 个 ， 不 能 够 空 选 或 多 选 。 
| 在 设计 单 选 按钮 组 时 ， ng 即 为 其 中 一 个 单 选 按钮 设置 checked 属性 。 
如 果 不 设 置 默认 值 ， 用 户 可 能 会 漏 选 ， 引 发 歧义 。 
【示例 】 下 log 
<fieldset class="radios"> 
<legend> 姓 名 </legend> 
<p class="row"> 
<input type="radio" id="gender-male" name="gender" value="male" /> 
<label for="gender-male"> 男 士 </label> 
<p> 
<p class="row"> 
<input type="radio" id="gender-female" name="gender" value="female" /> 
<label for="gender-female"> 女 士 </label> 
</p> 
</fieldset> 


| value 属性 对 于 单 选 按钮 来 说 很 重要 ， 因 为 访问 者 无 法 输入 值 。 推 荐 使 用 fieldset 嵌 套 每 组 单 选 按 
| 和， 并 用 legend 进行 描述 。 


873 复 选 


使 用 <input type="checkbox"> 可 以 定义 复 选 框 ， 多 个 name 属性 值 相同 的 复 选 框 可 以 合并 为 一 组 ， 
| 称 为 复 选 框 组 。 在 复 选 框 组 中 ,允许 用 户 不 选 或 者 多 选 。 也 可 以 使 用 checked 属性 设置 默认 选项 项 目 。 
| 【示例 】 下 面 示例 演示 了 如 何 创建 复 选 框 。 


<div class="fields checkboxes"> 
<p class="row"> 
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<input type="checkbox" id="email" name="email[]" value=" 电 子 邮 箱 " /> 
<label for="email"> 电 子 邮 件 </label> 

</p> 

<p class="row"> 
<input type="checkbox" id="phone" name="email[]" value=" 电 话 " /> 
<label for="phone"> 电 话 </label> 


</p> 
Be | Note 


标签 文本 不 需要 与 value 属性 一 致 。 这 是 因为 标签 文本 用 于 在 浏览 器 中 显示 ， 而 value 则 是 发 送 
给 服务 器 。 空 的 方 括号 是 为 PHP 脚本 的 name 准备 的 。 使 用 name="boxset" 识 别 发 送 至 服务 器 的 数据 ， | 
同时 用 于 将 多 个 复 选 框 联系 在 一 起 〈 对 于 所 有 复 选 框 使 用 同一 个 name 值 )。 使 用 id="idlabel" 对 应 于 
label 元 素 中 的 for 属性 值 。 

value="data" 里 的 data 是 该 复 选 框 被 选中 时 要 发 送 给 服务 器 的 文本 。 使 用 checked 或 checked= | 
"checked" 可 以 让 该 复 选 框 在 页 面 打开 时 默认 处 于 选中 状态 。 | 


8.7.4 文本 区 域 


如 果 希 望 用 户 输入 大 段 字符 串 (多 行文 本 ), 则 应 该 使 用 <textarea> 标 签 定 义 文本 区 域 控件 。<input | 

type="text" /> 只 能 够 接收 单行 文本 。<textarea> 标 签 包含 3 个 专用 属性 ， 简 单 说 明 如 下 。 

cols: 设置 文本 区 域内 可 见 字符 宽度 。 可 以 使 用 CSS 的 width 属性 代替 设计 。 

rows: 设置 文本 区 域内 可 见 行 数 。 可 以 使 用 CSS 的 height 属性 代替 设计 。 

wrap: 定义 输入 内 容 大 于 文本 区 域 宽度 时 显示 的 方式 。 

soft: 默认 值 ， 提 交 表 单 时 ， 被 提交 的 值 不 包含 不 换行 。 

hard: 提交 表单 时 ， 被 提交 的 值 包含 不 换行 。 当 使 用 hard 时 ， 必 须 设 置 cols 属性 。 
示例 】 下 面 示例 设计 一 个 简单 的 反馈 表 ， 主 要 使 用 表单 域 <fieldset> 标 签 、 表 单 域 标题 <legend> 
标签 、 文 件 上 传 控件 input (type="file") 和 文本 域 <textarea> 标 签 ， 显 示 效 果 如 图 8.6 所 示 。 


<div class="feedback"> 
<hl> 反 馈 表 </h1> 
<div class="content"> 
<form method="post" action=""> 

<fieldset class="base_info"> 
<legend> 用 户 信息 </legend> 
<label for="userName"> 用 户 名 </label> 
<input type="text" value="" id="userName" /> 
<label for="email"> 电 子 邮 件 </label> 
<input type="text" value="" id="email" /> 

</fieldset> 

<fieldset class="feedback_content"> 
<legend> 反 馈 信息 </legend> | 
<label for="msg"> 具 体内 容 </label> 
<textarea rows="8" cols="50" id="msg" placeholder=" 请 填写 详实 的 反馈 意见 。"></textarea> 
<label for="up_file"> 附 件 </label> | 
<input type="file" id="up_file" /> | 
<p class="tips"> 附 件 仅 支持 .jpg、.gif、.png 图 片 。</p> | 

</fieldset> | 

<button type="submit"> 提 交 </button> | 


天 加 固 因 图 图 
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反馈 信息 
具体 内 容 


[请 瑚 写 译 实 的 反馈 意见 。 


附件 
浏览 


附件 仅 支持 jpg、-gif、.pag 图 片 。 


图 8.6 设计 反馈 表 页 面 
| 如 果 没 有 设置 maxlength 属性 ， 用 户 最 多 可 以 输入 32700 个 字符 。 与 文本 框 不 同 ，textarea 没有 value 
| 属性 ， 默 认 值 可 以 包含 在 <textarea> 和 </textarea> 之 间 ， 也 可 以 设置 placeholder 属性 定义 占 位 文本 。 

” 说 提示， 默认 情况 下 textarea 不 会 继承 font 属性 ， 因 此 在 CSS 样式 表 中 需要 显 式 设置 该 属性 。 


textarea { 
font: inherit; 
padding: 2px; 


) 


8.7.5 ”选择 框 


| 选择 框 非常 适合 向 访问 者 提供 一 组 选项 ， 从 而 允许 他 们 从 中 选取 。 它们 通常 呈现 为 下 拉 菜单 的 样 
| 式 ， 如 果 人 允许 用 户 选择 多 个 选项 ， 选 择 框 就 会 呈现 为 一 个 带 滚动 条 的 列表 框 。 
| 选择 框 由 两 种 HTML 元 素 构成 : select 和 option。 通 常 ， 在 select 元 素 里 设置 name 属性 ， 在 每 个 
| option 元 素 里 设置 value 属性 。 
| 【示例 1】 下 面 示例 创建 一 个 简单 的 城市 下 拉 菜 单 。 
<label for="state"> 省 市 </label> 
<select id="state" name="state"> 
<option value="BJ"> 北 京 </option> 
<option value="SH"> 上 海 </option> 


er 
可 以 为 select 和 option 元 素 添加 样式 ， 但 有 一 定 的 限制 。 


Select { 
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font-size: inherit; 
} | 
CSS 规则 要 求 菜单 文本 和 其 父 元 素 字 号 大 小 相同 , 否则 默认 情况 下 它 看 上 去 会 小 很 多 。 可 以 使 用 
CSS 对 width、color 和 其 他 的 属性 进行 调整 , 不 过 , 不 同 的 浏览 器 呈现 下 拉 菜 单列 表 的 方式 咯 有 差异 。 。 食 内 
默认 的 选择 是 菜单 中 的 第 一 个 选项 , 或 者 是 在 HTML 中 指定 了 selected 的 选项 (需要 注意 的 一 点 一 一 
是 ， 除 非 设置 了 size 属性 ， 否 则 访问 者 就 必须 选择 菜单 中 的 某 个 选项 )。 
使 用 size="n" 设 置 选 择 框 的 高 度 以 行为 单位 )。 使 用 multiple 或 者 multiple="multiple" (两 种 方法 
在 HIML5 中 均 可 )， 人 允许 访问 者 选择 一 个 以 上 的 菜单 选项 ， 选 择 时 须 按 住 Control 键 或 Command 键 。 | 
每 个 选项 的 value="optiondata" 属 性 是 选项 选中 后 要 发 送 给 服务 器 的 数据 (如 果 省 略 value， 则 包 | 
含 的 文本 就 是 选项 的 值 。 使 用 selected 或 者 selected="selected" (在 HTML5 中 两 种 方式 均 可 )， 指定 该 
选项 被 默认 选中 。 | 
使 用 <optgroup> 标 签 可 以 对 选择 项 目 进行 分 组 ， 一 个 <optgroup> 标 签 包含 多 个 <option> 标 签 ， 然 
后 使 用 label 属性 设置 分 类 标题 ， 分 类 标题 是 一 个 不 可 选 的 伪 标 题 。 | 
【示例 2】 下 面 示例 使 用 optgroup 元 素 对 下 拉 菜 单项 目 进行 分 组 。 
<select name=" 选 择 城市 "> 
<optgroup label=" 山 东 省 "> 
<option value=" 浴 坊 "> 潍坊 </option> 
<option value=" 青 岛 " selected="selected"> 青 岛 </option> 
</optgroup> 
<optgroup label=" 山 西 省 "> 
<option value=" 太 原 "> 太原 </option> 
<option value=" 榆 次 "> 榆 次 </option> 
</optgroup> 
</select> | 
每 个 子 菜单 都 有 一 个 标题 (在 optgroup 开始 标签 的 label 属性 中 指定 ) 和 一 系列 选项 (使 用 option | 
元 素 和 常规 文本 定义 )。 浏 览 器 通常 会 对 optgroup 中 的 option 缩 进 ， 从 而 将 它们 和 optgrouplabel 属性 | 
文本 区 别 开 。 | 
如 果 添加 了 size 属性 ,那么 选择 框 看 起 来 会 更 像 一 个 列表 ， 且 没有 自动 选中 的 选项 ， 除 非 设置 了 ， 
selected。 | 
如 果 size 大 于 选项 的 数量 ， 访 问 者 就 可 以 通过 单 击 空白 区 域 让 所 有 的 选项 处 于 未 选中 状态 。 | 
可 以 对 option 元 素 添加 label 属性 ， 该 属性 用 于 指定 需要 显示 在 菜单 中 的 文本 (替代 了 option 标 ， 
签 之 间 的 文本 )， 不 过 Firefox 浏览 器 并 不 支持 这 一 属性 ， 因 此 最 好 不 要 用 它 。 
于 设置 了 size 属性 , 菜单 显示 为 一 个 有 滚动 条 的 列表 , 默认 情况 下 没有 选中 任何 选项 。 为 <select | 
id="state" name="state" size="3">， 可 以 让 菜单 的 高 度 为 3 行 。 


8.7.6 上 传 文件 


有 时 需要 让 网 站 的 用 户 向 服务 器 上 传 文件 〈 如 照片 、 简 历 等 )。 要 让 访问 者 能 够 上 传 文件 ， 必 须 
正确 地 设置 enctype 属性 ， 创 建 input type="file" 元 素 。 
【示例 】 下 面 示例 演示 了 如 何 创建 上 传 控件 。 


<form method="post" action="show-data.php" enctype="multipart/form-data"> 
<label for="picture"> 图 片 :</label> 
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<input type="file" id="picture" name="picture" /> 
<p class="instructions"> 最 大 700KB，JPG、GIF 或 PNG</p> 
</form> 


对 input 使 用 multiple 属性 可 以 允许 上 传 多 个 文件 (这 里 并 没有 包含 该 属性 )。 这 是 HTMLS5 中 新 


| 增 的 内 容 ， 它 也 得 到 了 浏览 器 的 广泛 支持 ， 不 过 ， 移 动 端 浏览 器 和 正 浏览 器 会 直接 忽略 它 〈IE10+ 
开始 支持 )。 


处 理 文件 上 传 需要 一 些 特殊 的 代码 。 可 以 在 网 上 搜索 文件 上 传 脚本 查看 相关 的 资源 。 同 时 ， 服 务 


， 器 需要 配置 正确 才能 存储 文件 。 


文件 域 为 用 户 提供 了 从 其 系统 中 选择 文件 的 方式 。 对 于 type="file" 的 input 元 素 ， 浏 览 器 会 自动 


| 创建 浏览 按钮 。Chrome 和 Safari 不 会 创建 框 ， 它 们 只 显示 按钮 。 


浏览 器 通常 不 允许 像 对 其 他 表单 元 素 那样 对 此 类 input 设置 样式 ， 对 于 允许 上 传 的 表单 ， 不 能 使 


用 get 方法 。 
8.7.7 ”隐藏 字段 


隐藏 字段 可 以 用 于 存储 表单 中 的 数据 ， 但 它 不 会 显示 给 访问 者 。 可 以 认为 它们 是 不 可 见 的 文本 框 。 


它们 通常 用 于 存储 先前 的 表单 收集 的 信息 ， 以 便 将 这 些 信息 同 当前 表单 的 数据 一 起 交 给 脚本 进行 处 理 。 


【示例 】 下 面 示例 演示 了 如 何 定义 隐藏 域 。 
<form method="post" action="your-scriptphp"> 
<input type="hidden" name="step" value="6" /> 
<input type="submit" value=" 提 交 " /> 
</form> 


访问 者 不 会 看 到 这 个 输入 框 ， 但 他 们 提交 表单 时 ， 名 “step” 和 值 “6” 会 随 着 表单 中 从 访问 者 输 


| 入 获取 的 数据 一 起 传送 给 服务 器 。 创建 隐藏 字段 时 ， 可 以 使 用 胸 本 中 的 变量 将 字段 的 值 设置 为 访问 者 
| 原来 输入 的 值 。 


什么 时 候 使 用 隐藏 字段 ? 
假设 有 一 个 表单 ， 希望 让 访问 者 在 提交 表单 之 前 有 机 会 检查 他 们 输入 的 内 容 。 处 理 表单 的 脚本 可 


| 以 条 访问 者 显示 提交 的 数据 ， 同 时 创建 一 个 表单 ， 其 中 有 包含 同样 数据 的 隐藏 字段 。 如 果 访 问 者 希望 
， 编辑 数据 ， 他 们 只 需 后 退 即 可 。 如 果 他 们 想 提交 表单 ， 由 于 隐藏 字段 已 经 将 数据 填 好 了 ， 因 此 他 们 就 
不 需要 再 次 输入 数据 。 


隐藏 字段 出 现在 表单 标记 中 的 位 置 并 不 重要 ， 因 为 它们 在 浏览 器 中 是 不 可 见 的 。 不 要 将 密码 、 信 


”用 卡号 等 敏感 信息 放 到 隐藏 字 段 中 。 即 便 它们 不 会 显示 到 网 页 中 ， 访 问 者 也 可 以 通过 查看 HTML 源 
| 代码 看 到 它 。 


| 这 提示 : 要 创建 访问 者 可 见 但 不 可 修改 的 表单 元 素 ， 有 两 各 方法: 一 种 是 使 用 disabled ( 茜 用 ) 局 


性 ; 另 一 种 是 使 用 readonly (只 读 ) 属性 。 与 禁用 字段 不 同 ， 只 读 字段 可 以 获得 焦点 ， 访 
问 者 可 以 选择 和 复制 里 面 的 文本 ， 但 不 能 修改 这 些 文本 。 它 只 能 应 用 于 文本 输入 框 和 文本 
区 域 ， 例 如 : 

<input type="text" id="coupon" name="coupon" value="FREE" readonly /> 


还 可 以 使 用 readonly="readonly" 这 样 的 形式 ， 结 果 是 一 样 的 。 
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8.7.8 提交 按钮 


HTMLS 按钮 分 为 3 种 类 型 。 
回 普通 按钮 : 不 包含 任何 操作 。 如 果 要 执行 特定 操作 ， 需 要 使 用 JavaScript 脚本 定义 。 
<input type="button" value=" 按 钮 名 称 "> 
<button type="button"> 按 钮 名 称 </button> | 
回 “提交 按钮 : 单 击 按钮 可 以 提交 表单 。 
<input type="submit" value=" 按 钮 名 称 "> 
<button type="submit"> 按 钮 名 称 </button> | 
<input type-"image" sre=" 按 钮 图 像 源 吃 | 
回 ” 重 置 按钮 ， 单 击 按钮 可 以 重 置 表单 ， 恢 复 默认 值 。 | 
<input type="reset" value=" 按 钮 名 称 "> | 
<button type="reset"> 按 钮 名 称 </button> | 
< 注 意 ， 如 果 在 HTML 表单 中 使 用 button 元 素 ， 不 同 的 浏览 器 会 提交 不 同 的 值 。 JE 将 提交 <button> | 
与 <button> 之 间 的 文本 ， 而 其 他 浏览 器 将 提交 value 属性 值 。 因此 ,一般 在 HIML 表单 中 使 
用 input 元 素来 创建 按钮。 
对 于 button 元 素来 说 ，IE 默认 类 型 是 "button"， 而 其 他 浏览 器 默认 值 是 "submit'。 因 此 使 用 ， 


button 元 素 时 ， 应 该 明确 定义 type 属性 。 
【示例 】 下 面 实例 比较 3 种 不 同类 型 的 提交 按钮 ， 显 示 效 果 如 图 8.7 所 示 。 


<form method="get" action="#"> 

<input type="text" name="uname" value=" 张 三 " /></br></br> 

<input type="password" name="pwd" value="123" /></br></br> 

<input type="image" src="images/button.png" name="image_btn" value=" 注 册 1" /> 

<input type="submit" name="input_btn" value=" 注 册 2" /> 

<button type="submit" name="button_btn" value=" 注 册 3"><img src="images/button.png" ></button> 
</form> 


DD localhost/test/testhtm x BN 


Eze 


图 8.7 提交 按钮 比较 效果 | 
从 功能 上 比较 ，<input type="image">、<input type="submit"> 和 <button type="submit"> 都 可 以 提交 


表单 ， 不 过 ，<input type="image"> 会 把 按钮 单 击 位 置 的 偏 移 坐 标 x、y 也 提交 给 服务 器 。 例 如 ， 如 果 
单 击 图 像 按钮 提交 表单 后 ， 则 URL 信息 如 下 . 
http:/localhost/test/testhtml?uname=9%0E59%0BC9%6A090E49%0B8%089&pwd=123&image_btn.x=35S&ima 


ge_btn.y=13&image btn=%E6%B3%A8%ES5%86%8C1# L 
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忘 提示 : 对 于 一 般 表 单 应 用 来 说 ， 在 服务 器 中 都 是 按照 指定 的 name 名 称 来 接收 、 处 理 参 数 ， 所 以 
即使 多 了 两 个 参数 也 不 会 有 任何 问题 。 但 是 在 做 支付 接口 时 (如 支付 宝 接口 ) ， 多 出 两 个 
隐藏 参数 就 会 带 来 很 麻烦 的 问题 ， 因 为 在 提交 表单 之 后 ， 接 收 端 会 对 参数 名 称 进 行 MD5 
校 验 ， 多 两 个 参数 会 直接 导致 表单 校 验 不 通过 ， 然 后 支付 失败 的 问题 ， 所 以 在 网 站 开发 中 
不 建议 使 用 <input type="image"> 作 为 表单 的 提交 按钮 。 
<input type="image"> 创 建 的 图 像 提交 按钮 ， 可 以 使 用 可 选 的 width 和 height 属性 定义 按钮 
大 小 。 如 果 不 填写 name 属性 ， 则 提交 按钮 的 “名 / 值 ”对 就 不 会 传递 给 服务 器 ， 由 于 一 般 
不 需要 这 一 信息 ， 因 此 可 以 不 为 按钮 设置 name 属性 。 

如 果 省 略 value 属性 ， 那 么 根据 不 同 的 浏览 器 ， 提 交 按钮 就 会 显示 默认 的 “提交 ”文本 ， 
如 果 有 多 个 提交 按钮 ， 可 以 为 每 个 按钮 设置 name 属性 和 value 属性 ， 从 而 让 脚本 知道 用 
户 按 下 的 是 哪个 按钮 。 否则， 最 好 省 略 name 属性 。 


8.8 HTMLS 新 型 输入 杠 


HTML5 新 增 了 多 个 输入 型 表单 控件 ， 通 过 使 用 这 些 新 增 的 表单 输入 类 型 ， 可 以 实现 更 好 的 输入 


| 体验 。 
8.8.1 定义 Email 杠 


email 类 型 的 input 元 素 是 一 种 专门 用 于 输入 Email 地 址 的 文本 框 ， 在 提交 表单 时 ， 会 自动 验证 


Email 输入 框 的 值 。 如 果 不 是 一 个 有 效 的 电子 邮件 地 址 ， 则 该 输入 框 不 允许 提交 该 表单 。 


击 “ 提 交 ” 按 钮 时 会 出 现 如 图 8.9 所 示 的 “请 输入 电子 邮件 地 址 ”的 提示 。 


【示例 】 下 面 是 email 类 型 的 一 个 应 用 示例 。 
<form action="demo_form.php" method="get"> 
请 输入 您 的 Email 地 址 : <input type="email" name="user_email" /><br /> 
<input type="submit" /> 
</form> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.8 所 示 。 如 果 输 入 了 错误 的 Email 地 址 格式 ， 单 


D localhosyindxlhtm = x OO—= [localhost/indect html x WW 
C | © localhost/index1 himl 人 |! 


请 输入 您 的 Email 地 址 ， 


| 提交 | 


C | © localhost/index1.himl 


请 输入 您 的 Emai 1 地址; 加 


清 在 忆 子 孝 件 地 址 中 包 
括 @"。 “3 中 缺少 "@” 


图 8.8 email 类 型 的 input 元 素 示例 图 8.9 检测 到 不 是 有 效 的 Email 地 址 
对 于 不 支持 type="email" 的 浏览 器 来 说 ， 将 会 以 type="text" 来 处 理 ， 所 以 并 不 妨碍 旧版 浏览 器 浏 


| 览 采用 HTML5 中 type="email" 输 入 框 的 网 页 。 
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8.8.2 定义 URL 框 


ul 类 型 的 input 元 素 提供 用 于 输入 ul 地 址 的 文本 框 。 当 提交 表单 时 ， 如 果 所 输入 的 是 rl 地 址 格 
式 的 字符 趾 ， 则 会 提交 服务 器 ， 如 果 不 是 ， 则 不 允许 提交 。 ， 侠 - 

【示例 】 下 面 是 ur 类 型 的 一 个 应 用 示例 。 | 
Note 


<form action="demo form.php" method="get"> 

请 输入 网 址 ;<input type="url" name="user_url" /><br/> 

<input type="submit" /> 

</form> | 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.10 所 示 。 如 果 输入 了 错误 的 url 地 址 格式 ， 单 击 
“提交 ”按钮 时 会 出 现 如 图 8.11 “请 输入 网 址 ”的 提示 。 | 


[localhoet/tecti html 。 x [localhostjtertiheml x 


GC | © localhosttesti html 和 GC | © localhost/test] html 


请 输入 网 址 , [了 一 请 输入 网 址 ，[ew ba com ] 
提交 提交 


园 请 注入 网 址 , 


图 8.10 url 类 型 的 input 元 素 示例 图 8.11 检测 到 不 是 有 效 的 url 地址 


< 注意 : www baidu.com 并 不 是 有 效 的 URL， 因 为 URL 必须 以 http:// 或 https:// 开 头 。 这 里 最 好 使 用 
占 位 符 提示 访问 者 。 另 外 ， 还 可 以 在 该 字段 下 面 的 解释 文本 中 指出 合法 的 格式 。 | 
对 于 不 支持 type="url" 的 浏览 器 ， 将 会 以 type="text" 来 处 理 。 


8.8.3 ”定义 数字 框 
number 类 型 的 input 元 素 提 供用 于 输入 数值 的 文本 框 。 用 户 还 可 以 设 定 对 所 接受 的 数字 的 限制 ， | 
包括 允许 的 最 大 值 和 最 小 值 、 合 法 的 数字 间隔 或 默认 值 等 。 如 果 所 输入 的 数字 不 在 限定 范围 之 内 , 则 | 


会 提示 错误 信息 。 
number 类 型 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 ， 说 明 如 表 8.2 所 示 。 


表 8.2 number 类 型 的 属性 


规定 允许 的 最 小 值 
规定 合法 的 数字 间隔 (如 果 step="4"， 则 合法 的 数 是 -4,0,4,8 等 ) 
规定 默认 值 


【示例 】 下 面 是 number 类 型 的 一 个 应 用 示例 。 


<form action="demo_form php" method="get"> 

请 输入 数值 : <input type="number" name="numberl" min="1" max="20" step="4"> 
<input type="submit" /> 

</form> 
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以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.12 所 示 。 如 果 输 入 了 不 在 限定 范围 之 内 的 数字 ， 
二 “提交 ”按钮 时 会 出 现 如 图 8.13 所 示 的 提示 。 


| 到 本 
Pn x 
食 往 | & [@ aaaosyiestl Ptml 3 © |[@ localhost/restl html : 
SR | sdds. Deohotetihiml 六 
请 输入 数值 ， | 提交 请 输入 数值 , | 河 二 EE 


Note 回 人 wm 于 吕 寺 于 20, 


图 8.12 number 类 型 的 input 元 素 示例 图 8.13 检测 到 输入 了 不 在 限定 范围 之 内 的 数字 


图 8.13 所 示 为 输入 了 大 于 规定 的 最 大 值 时 所 出 现 的 提示 。 同 样 的 ， 如 果 违 反 了 其 他 限定 ， 也 会 
出 现 相关 提示 。 例 如 ， 如 果 输 入 数值 5， 则 单 击 “ 提 交 ” 按 钮 时 会 出 现 “ 值 无 效 ” 的 提示 ， 如 图 8.14 
， 所 示 。 这 是 因为 限定 了 合法 的 数字 间隔 为 4， 在 输入 时 只 能 输入 4 的 信 数 ， 如 4、8、16 等 。 又 如 ， 
如 果 输 入 数值 -12， 则 会 提示 “ 值 必须 大 于 或 等 于 1"， 如 图 8.15 所 示 。 


[localhost/testihtml x [localhostftestihtml x 


3 GO localhost/testl html La 3 © |© localhost/testl html 
请 输入 数值 , [可 是 请 输入 数值 , [ 吧 “3] [ 强 交 ] 
最 接近 的 有 效 虽 值 必须 大 于 或 等 于 1 


回 请 千 和 有效 值 。 两 个 
值 分 别 为 13 和 17, 


图 8.14 出 现 “ 值 无 效 ” 的 提示 图 8.15 提示 “ 值 必须 大 于 或 等 于 1” 


8.8.4 定义 范围 杠 
range 类 型 的 input 元 素 提供 用 于 输入 包含 一 定 范围 内 数字 值 的 文本 框 ， 在 网 页 中 显示 为 滑动 条 。 
| 用户 可 以 设 定 对 所 接受 的 数字 的 限制 , 包括 规定 允许 的 最 大 值 和 最 小 值 、 合 法 的 数字 间隔 或 默认 值 等 。 
如 果 所 输入 的 数字 不 在 限定 范围 之 内 ， 则 会 出 现 错误 提示 。 

range 类 型 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 ， 说 明 如 表 8.3 所 示 。 


表 8.3 range 类 型 的 属性 


属 性 描述 
max, 规定 允许 的 最 大 值 
min 规定 允许 的 最 小 值 
step 规定 合法 的 数字 间隔 〈 如 果 step="4"， 则 合法 的 数 是 -4,0,4,8 等 ) 
value 规定 默认 值 


| 从 表 8.3 可 以 看 出 ，range 类 型 的 属性 与 number 类 型 的 属性 相同 ， 这 两 种 类 型 的 不 同 在 于 外 观 表 
| 现 上 ， 支 持 range 类 型 的 浏览 器 都 会 将 其 显示 为 滑 块 的 形式 ， 而 不 支持 range 类 型 的 浏览 器 则 会 将 其 
显示 为 普通 的 文本 框 ， 即 以 type="text" 来 处 理 。 
【示例 】 下 面 是 range 类 型 的 一 个 应 用 示例 。 

<form action="demo _form.php" method="get"> 

请 输入 数值 : <input type="range" name="rangel" min="1" max="30" /> 

<input type="submit" /> 

</form> 


ss 
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以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.16 所 示 。 range 类 型 的 input 元 素 在 不 同 浏览 器 中 
的 外 观 也 不 同 ， 例 如 在 Opera 浏览 器 中 的 外 观 如 图 8.17 所 示 ， 会 在 滑 块 下 方 显示 出 额外 的 数字 间隔 ， 
短线 。 | 


DY localhostfesti html x 


> G © localhost/estihtm : WA Wn ‘Note 
| 


请 输入 堵 值 。 肯 国 引 


图 8.16 range 类 型 的 input 元 素 示例 图 8.17 range 类 型 的 input 元 素 在 Opera 浏览 器 的 外 观 


8.8.5 定义 日 期 选择 器 


日 期 选择 器 (Date Pickers) 是 网 页 中 经 常 要 用 到 的 一 种 控件 ， 在 HTML5 之 前 版 本 中 ， 并 没有 提 
供 任何 形式 的 日 期 选择 器 控件 ， 多 采用 一 些 JavaScript 框架 来 实现 日 期 选择 器 控件 的 功能 ， 如 jQuery | 
UI、YUI 等 ， 在 具体 使 用 时 会 比较 麻烦 。 | 
HIML5 提供 了 多 个 可 用 于 选取 日 期 和 时 间 的 输入 类 型 ， 即 6 种 日 期 选择 器 控件 ， 分 别 用 于 选择 | 
以 下 日 期 格式 日期、 月、 星期 、 时间、 日 期 + 时 间 、 日 期 + 时 间 + 时 区 ， 如 表 8.4 所 示 。 | 


表 8.4 日 期 选择 器 类 型 


输入 类 型 功能 与 说 明 

date 选取 日 、 月 、 年 

month 选取 月 、 年 

week 选取 周 和 年 

time 选取 时 间 (小 时 和 分 钟 ) 

datetime 选取 时 间 、 日 、 月 、 年 (UTC 时 间 ) 


datetime-local <input type="datetime-local"> 选取 时 间 、 日 、 月 、 年 〈 本 地 时 间 ) 


肉 提示 : UTC 时 间 就 是 0 时 区 的 时 间 ， 而 本 地 时 间 就 是 本 地 时 区 的 时 间 。 例 如 ， 如 果 北 京 时 间 为 
早上 8 点 ， 则 UTC 时 间 为 0 点 ， 也 就 是 说 UTC 时 间 比 北京 时 间 晚 8 小 时 。 | 


1. date 类 型 | 

date 类 型 的 日 期 选择 器 用 于 选取 日 、 月 、 年 ， 即 选择 一 个 具体 的 日 期 ， 例 如 2018 年 12 月 14 日 ， 
选择 后 会 以 2018/12/14 的 形式 显示 。 | 

【示例 1】 下 面 是 date 类 型 的 一 个 应 用 示例 。 

<form action="demo_form.php" method="get"> 

请 输入 日 期 : <input type="date" name=" datel" /> 

<input type="submit" /> 

</form> | 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.18 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 8.19 | 
所 示 。Chrome 浏览 器 中 显示 为 右 侧 带 有 微调 按钮 的 数字 输入 框 ， 可 见 该 浏览 器 并 不 支持 日 期 选择 器 
控件 。 而 Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 ， 用 户 可 以 使 用 控件 来 选择 具体 日 期 。 L 
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功 R6 sy| 医 加 


[locolhost/testt berm! x © 可 加 区 
3 © | @ localhost/tiestl.html : 导 - 局 - 同 = 天 局 五 局 局 


请 输入 日 期 ， [EVAR/B 。 > | [ 雪 Fe 

Dnt nt 
如 加] 六 
24 15 26 27 2 2 
31 


图 8.18 在 Chrome 浏览 器 中 的 运行 结果 图 8.19 在 Opera 浏览 器 中 的 运行 结果 


2. month 类 型 


| month 类 型 的 日 期 选择 器 用 于 选取 月 、 年 ， 即 选择 一 个 具体 的 月 份 ， 例 如 2018 年 12 月 ， 选 择 后 
| 会 以 2018/12 的 形式 显示 。 
| 【示例 2】 下 面 是 month 类 型 的 一 个 应 用 示例 。 
| <form action="demo form.php" method="get"> 
| 请 输入 月 份 : <input type="month" name=" month1" /> 
| <input type="submit" /> 
| </form> 

| 以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.20 所 示 ， 在 Opera 浏览 器 中 的 运行 结果 如 图 8.21 
| 所 示 。Chrome 浏览 器 中 显示 为 右 侧 带 有 微调 按钮 的 数字 输入 框 ， 输 入 或 微调 时 会 只 显示 到 月 份 ， 而 不 
| 会 显示 日 期 。 Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 , 用 户 可 以 使 用 控件 来 选择 具体 月 份 ， 
| 但 不 能 选择 具体 日 期 。 可 以 看 到 , 整个 月 份 中 的 日 期 都 会 以 深 灰 色 显示 , 单 击 该 区 域 可 以 选择 整个 月 份 。 


[ x|+ 


< C 8 ® localhost 


| 和 RB 份 : ES v] 医 双 


DD localhost/test2html x 2018 年 12 月 ~ 


© [© localhos/testz.ntm : | 局- 周 = 周 = 所 中 周 局 


请 输入 月 份 。 一 -年 -月 EE 5 8 7 
他 3 
1 [ 杰 ] 2 


5 26 27 29 


图 8.20 在 Chrome 浏览 器 中 的 运行 结果 图 8.21 在 Opera 浏览 器 中 的 运行 结果 


3. week 类 型 
”week 类 型 的 日 期 选择 器 用 于 选取 周 和 年 , 即 选择 一 个 具体 的 哪 一 周 , 例如 2018 年 12 月 第 51 周 ， 
| 选择 后 会 以 “2018 年 第 51 周 ”的 形式 显示 。 

【示例 3】 下 面 是 week 类 型 的 一 个 应 用 示例 。 


| <form action="demo _form.php" method="get"> 

| 请 选择 年 份 和 周 数 : <input type="week" name="weekl" /> 
| <input type="submit" /> 

| </form> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.22 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 8.23 


ls 
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所 示 。Chrome 浏览 器 中 显示 为 右 侧 带 有 微调 按钮 的 数字 输入 框 ， 输 入 或 微调 时 会 显示 年 份 和 周 数 ， | 
而 不 会 显示 日 期 。Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 ， 用 户 可 以 使 用 控件 来 选择 具 | 
体 的 年 份 和 周 数 , 但 不 能 选择 具体 日 期 。 可 以 看 到 , 整个 月 份 中 的 日 期 都 会 以 深 灰 色 显示 按 周 数 显示 ， | 
单 击 该 区 域 可 以 选择 某 一 周 。 


出 


和 =: 


¢ » C 8 |[® lochest po ‘Note 


这 渤 择 年 份 和 周 数 : | 过 年 第 一 月 “Sv 


[localhosthest3heml x 


© [© iocaihosties3 ptm 


2018 年 2 月 ~ bs, bel t 

请 选择 年 从 和 周 数 。 | 一 - 年 第 一 周 45 6 7 
2 4 
19 [aa 
本 2 28 


图 8.22 在 Chrome 浏览 器 中 的 运行 结果 图 8.23 在 Opera 浏览 器 中 的 运行 结果 


4. time 类 型 


time 类 型 的 日 期 选择 器 用 于 选取 时 间 , 具体 到 小 时 和 分 钟 , 例如 ,选择 后 会 以 22:59 的 形式 显示 。 | 
【示例 4】 下 面 是 time 类 型 的 一 个 应 用 示例 。 


<form action="demo _form.php" method="get"> 
请 选择 或 输入 时 间 : <input type="time" name="timel" /> 
<input type="submit" /> 
</form> | 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.24 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 8.25 
所 示 。 | 


Wh localhosteo80/mysite 


< C 器 


© © locahosutest4html 


| 
2 x | 
[DY localhost/testhhtml x | 入: [20:50 x | | 
| 
请 迪 择 或 输入 时 间 ， [一 :二 | [下 和 ] | 


图 8.24 在 Chrome 浏览 器 中 的 运行 结果 图 8.25 在 Opera 浏览 器 中 的 运行 结果 


除了 可 以 使 用 微调 按钮 之 外 , 还 可 以 直接 输入 时 间 值 。 如 果 输入 了 错误 的 时 间 格式 并 单 击 “ 提 交 ” 
按钮 ， 则 在 Chrome 浏览 器 中 会 自动 更 正 为 最 接近 的 合法 值 ， 而 在 下 10 浏览 器 中 则 以 普通 的 文本 杠 
显示 ， 如 图 8.26 所 示 。 


hp 
请 选择 或 给 入 时 间 : 


提交 查询 内容 


图 8.26 IE10 不 支持 该 类 型 输入 框 
time 类 型 支持 使 用 一 些 属性 来 限定 时 间 的 大 小 范围 或 合法 的 时 间 间 隔 ， 如 表 8.5 所 示 。 


as。 153 。 


属 性 描 ” 述 
max 规定 允许 的 最 大 值 
min 规定 允许 的 最 小 值 
step 规定 合法 的 时 间 间 隔 
value 规定 默认 值 


【示例 $] 可 以 使 用 下 列 代码 来 限定 时 间 。 

| <form action="demo form.php" method="get"> 

请 选择 或 输入 时 间 : <input type="time" name="timel" step="5" value="09:00"> 

<input type="submit" /> 

</form> 

| 以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.27 所 示 , 可 以 看 到 ,在 输入 框 中 出 现 设 置 的 默认 
| 值 “09:00”， 并 且 当 单 击 微调 按钮 时 ， 会 以 5 秒 钟 为 单位 递增 或 递减 。 当 然 ， 用 户 还 可 以 使 用 min 和 
”max 属性 指定 时 间 的 范围 。 

| 在 date 类 型 、month 类 型 、week 类 型 中 也 支持 使 用 上 述 属性 值 。 

5. datetime 类 型 


| datetime 类 型 的 日 期 选择 器 用 于 选取 时 间 、 日 、 月 、 年 ， 其 中 时 间 为 UTC 时 间 。 
【示例 6】 下 面 是 datetime 类 型 的 一 个 应 用 示例 。 

<form action="demo_form.php" method="get"> 

请 选择 或 输入 时 间 : <input type="datetime" name="datetimel" /> 

<input type="submit" /> 

</form> 

以 上 代码 在 Safari 浏览 器 中 的 运行 结果 如 图 8.28 所 示 。 


© | ©® localhost/rest5 himl © J@ iocalhosiestesthim 全 | 


| 请 选择 或 答 入 时 间 ，[oa:oo: 画 x 弛 | 此 交 | 请 壮 择 或 输入 时 间 : 2015-12.2071415Z 提交 | 


图 8.27 使 用 属性 值 限 定时 间 类 型 图 8.28 在 Safari 浏览 器 中 的 运行 结果 


| < 注意 : 下 、Firefox 和 Chrome 最 新 版 本 不 再 支持 <input type="datetime"> 元 素 ，Chrome 和 Safari 部 
分 版 本 支持 。Opera 12 以 及 更 早 的 版 本 中 完全 支持 。 


6. datetime-local 类 型 

datetime-local 类 型 的 日 期 选择 器 用 于 选取 时 间 、 上 日、 月、 年 ， 其 中 时 间 为 本 地 时 间 。 
| 【示例 7】 下 面 是 datetime-local 类 型 的 一 个 应 用 示例 。 

| <form action="demo form.php" method="get"> 

| 请 选择 或 输入 时 间 : <input type="datetime-local" name="datetime-locall" /> 

| <input type="submit" /> 

| </form> 
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以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.29 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 8.30 | 


所 示 。 
2 1 | 
locahosta0en/mysite/ X 十 | 
= | 全 中 
| Bn 


C 8 加 localhost 


请 选择 或 输入 时 间 ; [2017710720 避 ; 郊 x3 吕 | | 
加 回回 Note 


tm : 
请 让 择 到 给 和 时间，[ni7/1072n : 咖 x 于] [和 | 2 
四 加 | 加 2017 年 0 月 


2017 年 10 有 一 
局 - 周 - 周 = 周 四 古书 ; 由 
1 

7 8 

但 1 二 

B21 2 

28 2 


图 8.29 在 Chrome 浏览 器 中 的 运行 结果 图 8.30 在 Opera 浏览 器 中 的 运行 结果 


8.8.6 ”定义 搜索 杠 
search 类 型 的 input 元 素 提 供用 于 输入 搜索 关键 词 的 文本 框 ,在 外 观 上 看 起 来 , search 类 型 的 input ， 
元 素 与 普通 的 text 类 型 的 区 别 : 当 输 入 内 容 时 ， 右 侧 会 出 现 一 个 “X ”图标 ， 单 击 即 可 清除 搜索 框 。 | 
【示例 】 搜 索 框 是 应 用 placeholder 的 最 佳 控 件 。 同 时 ， 注 意 这 里 的 form 用 的 是 method="get"， | 
而 不 是 method="post"。 这 是 搜索 字段 的 常规 做 法 (无 论 是 type="search"， 还 是 type="text")。 
<form method="get" action="search-results.php" role="search"> 
<label for="search"> 请 输入 搜索 关键 词 : </label> 
<input type="search" id="search" name="search" size="30" placeholder=" 输 入 的 关键 字 " /> 
<input type="submit" value=" Go " /> 
</form> 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.31 所 示 。 如 果 在 搜索 框 中 输入 要 搜索 的 关键 词 ， 
在 搜索 框 右 侧 就 会 出 现 一 个 “xX” 按钮 。 单 击 该 按钮 可 以 清除 已 经 输入 的 内 容 。 

OS X 上 的 Chrome、Safari 以 及 iOS 上 的 Mobile Safari 会 让 搜索 框 显示 为 圆 角 边框 ， 当 用 户 开 | 
始 输入 ， 字 段 右 侧 会 出 现 一 个 “X ”按钮 ， 用 于 清除 输入 的 内 容 。 新 版 的 卫 、Chrome、Opera 浏览 器 | 
支持 “X ”按钮 这 一 功能 ，Firefox 浏览 器 则 不 支持 ， 显 示 为 常规 文本 框 的 样子 ， 如 图 8.32 所 示 。 | 

localhost:S080/mysite/tes x 二 


co 


€ © localhostB080/my 


请 移入 提 索 关键 词 : htm 


localheepectt himl x 
© ©® localhost/test1.him 


请 输入 搜索 关键 局 ，[hml 


图 8.32 Firefox 没有 “X ”按钮 


图 8.31 search 类 型 的 应 用 
总 提示 : 在 默认 情况 下 ， 为 Chrome、Safari 和 Mobile Safari 等 浏览 器 中 的 搜索 框 设置 样式 是 受到 
限制 的 . 如果 要 消除 这 一 约束 ,重新 获得 CSS 的 控制 权 ,可 以 使 用 专 有 的 -webkitappearance: ， 


none; 声明 ， 例 如 : 


input[type="search"] { 
-webkitappearance: none; 
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”0 注意 ;appearance 属性 并 不 是 官方 的 CSS， 因 此 不 同 浏览 器 的 行为 有 可 能 不 一 样 . 


8.8.7 ”定义 电话 号 码 框 


tel 类 型 的 input 元 素 提 供 专门 用 于 输入 电话 号 码 的 文本 框 。 它 并 不 限定 只 输入 数字 ， 因 为 很 多 的 

电话 号 码 还 包括 其 他 字符 ， 如 “+”“-”“(”“)” 等 ， 例 如 86-0536-8888888 。 
【示例 】 下 面 是 tel 类 型 的 一 个 应 用 示例 。 

<form action="demo form.php" method="get"> 

请 输入 电话 号 码 : <input type="tel" name="tell" /> 

<input type="submit" value=" 提 交 "/> 

</form> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.33 所 示 。 从 某 种 程度 上 来 说 ,所 有 的 浏览 器 都 支 
持 tel 类 型 的 mput 元 素 ， 因 为 它们 都 会 将 其 作为 一 个 普通 的 文本 框 来 显示 。HTMLS 规则 并 不 需要 浏 
览 器 执行 任何 特定 的 电话 号 码 语法 或 以 任何 特别 的 方式 来 显示 电话 号 码 。 


日 localhocveectlhtml x 


CG @ localhost/test1.him 立 ] ; 


请 输入 电话 号 码 ,[ EE 


图 8.33 ”tel 类 型 的 应 用 
8.8.8 ”定义 拾 色 器 
color 类 型 的 input 元 素 提 供 专 门 用 于 选择 颜色 的 文本 框 。 当 color 类 型 文本 框 获取 焦点 后 ， 会 自 


动 调用 系统 的 颜色 窗口 ， 包 括 苹果 系统 也 能 弹出 相应 的 系统 色 盘 。 


【示例 】 下 面 是 color 类 型 的 一 个 应 用 示例 。 

<form action="demo_form.php" method="get"> 

请 选择 一 种 颜色 ， <input type="color" name="colorl" /> 

<input type="submit" value=" 提 交 "> 

</form> 

以 上 代码 在 Opera 浏览 器 中 的 运行 结果 如 图 8.34 所 示 ， 单 击 “ 颜 色 ” 文 本 框 ， 会 打开 Windows 
的 “颜色 ”对 话 框 ， 如 图 8.35 所 示 ， 选 择 一 种 颜色 后 ， 单 击 “ 确 定 ”按钮 返回 到 网 页 ， 这 时 可 以 看 
到 颜色 文本 框 显 示 对 应 颜色 效果 ， 如 图 8.36 所 示 。 


lccalhost/test.html 


«CC | localhost/estl him 


请 潜 择 一 种 鼎 色 ，| 节 是 | [把 二 ] 


图 8.34 ”color 类 型 的 应 用 
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IR): 255 
侈 和 度 (Sk |240 | 绿 G): 0 
可 l 纯 (0) 完 朗 (W: |120 | 昔 U: 0 
添加 到 让 定义 柄 色 IA) 


图 8.35 Windows 系统 中 的 “颜色 ”对 话 框 图 8.36 设置 颜色 后 效果 


容 提示 : IE 和 Safari 浏览 器 暂 不 支持 。 
8.9 HTMLS 输入 属性 


HTMLS 为 input 元 素 新 增 了 多 个 属性 ， 用 于 限制 输入 行为 或 格式 。 
8.9.1 定义 自动 完成 
autocomplete 属性 可 以 帮助 用 户 在 输入 框 中 实现 自动 完成 输入 。 取 值 包括 on 和 off， 用 法 如 下 
所 示 。 | 
<input type="email" name="email" autocomplete="off" /> 
肉 提示 : autocomplete 属性 适用 input 类 型 ， 包 括 text、search、url、telephone、email、password、 
datepickers、range 和 color。 | 
autocomplete 属性 也 适用 于 form 元 素 , 在 默认 状态 下 表单 的 autocomplete 属性 处 于 打开 状态 ， | 
其 包含 的 输入 域 会 自动 继承 autocomplete 状 态 , 也 可 以 为 某 个 输入 域 单独 设置 autocomplete 
状态 。 
< 注意 : 在 某 些 浏览 器 中 需要 先 启用 浏览 器 本 身 的 自动 完成 功能 ， 才 能 使 autocomplete 属性 起 作用 。 
【示例 】 设 置 autocomplete 为 on 时 ， 可 以 使 用 HIMLS 新 增 的 datalist 元 素 和 list 属性 提供 一 个 
数据 列表 供用 户 进行 选择 。 下 面 示例 演示 如 何 应 用 autocomplete 属性 、datalist 元 素 和 list 属性 实现 自 | 
动 完成 。 
<h2> 输 入 你 最 喜欢 的 城市 名 称 </h2> 
<form autocompelete="on"> 
<input type="text" id="city" list="cityList"> 
<datalist id="cityList" style="display:none:;"> 
<option value="BeiJing">BeiJing</option> 
<option value="QingDao">QingDao</option> 
<option value="QingZhou">QingZhou</option> 


| 
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<option value="QingHai">QingHai</option> 


</datalist> 
</form> 
全 站 | 在 浏览 器 中 预览 ， 当 用 户 将 焦点 定位 到 文本 框 中 ， 会 自动 出 现 一 个 城市 列表 供用 户 选择 ， 如 图 8.37 
~ 所 示 。 而 当 用 户 单 击 页 面 的 其 他 位 置 时 ， 这 个 列表 就 会 消失 。 
当 用 户 输入 时 ， 该 列表 会 随 用 户 的 输入 自动 更 新 ， 例 如 ， 当 输入 字母 q 时 ， 会 自动 更 新 列表 ， 
”只 列 出 以 q 开头 的 城市 名 称 ， 如 图 8.38 所 示 。 随 着 用 户 不 断 地 输入 新 的 字母 ， 下 面 的 列表 还 会 随 之 


| 变化 。 


[lecalhesttert2html x DD localhost/est2html x 


© © localhost/test2html : Q | © localhost/tiest2html 女 | 


输入 你 最 喜欢 的 城市 名 称 输入 你 最 喜欢 的 城市 名 称 


a 了 
Bebing 

Qingpao 

Qingzhou 

qingHai 


图 8.37 自动 完成 数据 列表 图 8.38 数据 列表 随 用 户 输入 而 更 新 


， 窟 提示 : 多 数 浏览 器 都 带 有 辅助 用 户 完成 输入 的 自动 完成 功能 ， 只 要 开启 了 该 功能 , 浏览 器 会 自动 
记录 用 户 所 输入 的 信息 ， 当 再 次 输入 相同 的 内 容 时 ， 浏 览 器 就 会 自动 完成 内 容 的 输入 。 从 
安全 性 和 隐私 的 角度 考虑 ， 这 个 功能 存在 较 大 的 隐患 ， 如 果 不 希 望 浏览 器 自动 记录 这 些 信 
息 ， 则 可 以 为 form 或 form 中 的 input 元 素 设置 autocomplete 属性 ， 关 闭 该 功能 。 


8.9.2 定义 自动 获取 焦点 
autofocus 属性 可 以 实现 在 页 面 加 载 时 ， 让 表单 控件 自动 获得 焦点 ， 用 法 如 下 所 示 。 


<input type="text" name="fname" autofocus="autofocus" /> 
autocomplete 属性 适用 所 有 <input> 标 签 的 类 型 ， 如 文本 框 、 复 选 框 、 单 选 按钮 、 普 通 按钮 等 。 


4 注意 在 同一 页 面 中 只 能 指定 一 个 antofocus 对 象 ， 当 页 面 中 的 表单 控件 比较 多 时 ， 建 议 为 最 需 
| 要 聚焦 的 那个 控件 设置 autofocus 属性 值 ， 如 页 面 中 搜索 文本 框 ， 或 者 许可 协议 的 “同意 ” 
按钮 等 。 


【示例 1】 下 面 示例 演示 如 何 应 用 autofocus 属性 。 


<form> 
<p> 请 仔细 阅读 许可 协议 : </p> 
<label for="textareal"></label> 
<textarea name="textareal" id="textareal" cols="45" rows="5"> 许 可 协议 具体 内 容 .…..</textarea> 
</p> 
< 
<input type="submit" value=" 同 意 " autofocus> 
<input type="submit" value=" 拒 绝 "> 


“158。 


第 8 章 设计 表单 


<p> 
</form> | 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.39 所 示 。 页 面 载 入 后 ,“ 同 意 ” 按钮 自动 获得 焦 | 
点 ， 因 为 通常 希望 用 户 直接 单 击 该 按钮 。 如 果 将 “拒绝 ”按钮 的 autofocus 属性 值 设置 为 on， 则 而 
载 入 后 焦点 就 会 落 在 “拒绝 ”按钮 上 ， 如 图 8.40 所 示 ， 但 从 页 面 功用 的 角度 来 说 却 并 不 合适 。 


站 ecalhestkestlheml x DD localhest/testiheml x 


| Note 
| 
@& | © acalhostiestl Ptml i & [© localhost/iestl html 女 | 了 | 


请 仔 组 网 斌 许可 协议 请 仔 绍 赔 旗 许 可 协议 ; 
评 林 协议 是 体内 容 -… 评 可 协议 旭 体 内 容 .… 


图 8.39 “同意 ”按钮 自动 获得 焦点 图 8.40 “拒绝 ”按钮 自动 获得 焦点 


【示例 2】 如 果 浏 览 器 不 支持 autofocus 属性 ， 可 以 使 用 JavaScript 实现 相同 的 功能 。 在 下 面 脚本 
中 ， 先 检测 浏览 器 是 否 支持 autofocus 属性 ， 如 果 不 支持 则 获取 指定 的 表单 域 , 为 其 调用 focus( 方 法 ，| 
强迫 其 获取 焦点 。 
<script> 
if(!("autofocus" in document.createElement("input"))) { 
document.getElementById("ok").focus():; 


1 
</script> 


8.9.3 ”定义 所 属 表单 


form 属性 可 以 设置 表单 控件 归属 的 表单 ， 适 用 于 所 有 <input> 标 签 的 类 型 。 


肉 提示 : 在 HTML4 中 ， 用 户 必须 把 相关 的 控件 放 在 表单 内 部 ， 即 <form> 和 </form> 之 间 。 | 
表单 时 ， 在 <form> 和 </form> 之 外 的 控件 将 被 忽略 。 


【示例 】form 属性 必须 引用 所 属 表单 的 4d， 如果 一 个 form 属性 要 引用 两 个 或 两 个 以 上 的 表单 ， 

则 需要 使 用 空格 将 表单 的 id 值 分 隔 开 。 下 面 是 一 个 form 属性 应 用 。 

<form action="" method="get" id="form1"> 

请 输入 姓名 : <input type="text" name="namel" autofocus/> 

<input type="submit" value=" 提 交 "/> 

</form> 

请 输入 住址 ，<input type="text" name="addressl" form="form1" /> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.41 所 示 。 如 果 填 写 姓 名 和 住址 并 单 击 “ 提 交 ” 按 
钮 ， 则 namel 和 addressl 分 别 会 被 赋值 为 所 填写 的 值 。 例 如 ， 如 果 在 姓名 处 填写 “zhangsan”， 住 址 
处 填写 “北京 >”， 则 单 击 “ 提 交 ” 按 钮 后 ， 服 务 器 端 会 接收 到 namel=zhangsan 和 “address1= 北 京 ”。 
用 户 也 可 以 在 提交 后 观察 浏览 器 的 地 址 栏 ， 可 以 看 到 有 “namel=zhangsan&address1= 北 京 ”字样 ， 如 
图 8.42 所 示 。 


二 人 9 


[localhost3080/mysite, x Ne 


© © localnost3080/mysite/te.. 会 | ; 


请 注入 姓名 : Ehangsan E23 
请 输入 住址 : 比 到 | 


图 8.41 form 属性 的 应 用 图 8.42 地址 中 要 提交 的 数据 


8.9.4 定义 表单 重 写 
| 


HTMLS 新 增 $ 个 表单 重 写 属性 ， 用 于 重 写 <form> 标 签 属性 设置 ， 简 单 说 明 如 下 。 
formaction: 重 写 <form> 标 签 的 action 属性 。 

formenctype: 重 写 <form> 标 签 的 enctype 属性 。 

formmethod: 重 写 <form> 标 签 的 method 属性 。 

formnovalidate: 重 写 <form> 标 签 的 novalidate 属性 。 

formtarget: 重 写 <form> 标 签 的 target 属性 。 


4) 注意 : 表单 重 写 属性 仅 适用 于 submit 和 image 类 型 的 input 元 素 。 
【示例 】 下 面 示例 设计 通过 formaction 属性 ， 实 现 将 表单 提交 到 不 同 的 服务 器 页 面 。 


<form action="1.asp" id="testform"> 

请 输入 电子 邮件 地 址 : <input type="email" name="userid" /><br /> 
<input type="submit" value=" 提 交 到 页 面 1" formaction="1.asp" /> 
<input type="submit" value=" 提 交 到 页 面 2" formaction="2.asp" /> 
<input type="submit" value=" 提 交 到 页 面 3" formaction="3.asp" /> 

</form> 


图 图 图 图 加 


8.9.5 ”定义 高 和 宽 


height 和 width 属性 仅 用 于 设置 <input type="image"> 标 签 的 图 像 高 度 和 宽度 。 
【示例 】 下 面 示例 演示 了 height 与 width 属性 的 应 用 。 

<form action="testform.asp" method="get"> 

请 输入 用 户 名 : <input type="text" name="user_name" /><br /> 

<input type="image" src="images/submit png" width="72" height="26" /> 

</form> 
| 源 图 像 的 大 小 为 288 像素 x104 像素 ,使 用 以 上 代码 将 其 大 小 限制 为 72 像素 x26 像素 , 在 Chrome 
| 浏览 器 中 的 运行 结果 如 图 8.43 所 示 。 


C 加 localhost/test].ntml 


请 输入 用 户 名 : 


图 8.43 fomm 属性 的 应 用 


“60s 


第 8 章 设计 表单 一 $5 
Rd 加 


8.9.6 ”定义 列表 选项 


和 
list 属性 用 于 设置 输入 域 的 datalistdatalist 是 输入 域 的 选项 列表 。 该 属性 适用 于 以 下 类 型 的 <input> | 如 


频 讲 解 
标签 : text、search、url、telephone、email、date pickers、number、range 和 color。 | 


< 注意 : 目前 最 新 的 主流 浏览 器 都 已 支持 list 属性 ， 不 过 呈现 形式 略 有 不 同 。 
8.9.7 定义 最 小 值 、 最 大 值 和 步 长 


min、max 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 输入 类 型 设置 限 值 ， 适 用 于 date pickers、 
number 和 range 类 型 的 <input> 标 签 ， 具 体 说 明 如 下 。 

加 ”max 属性 : 设置 输入 框 所 允许 的 最 大 值 。 

四 “min 属性 : 设置 输入 框 所 允许 的 最 小 值 。 

四 step 属性 : 为 输入 框 设 置 合法 的 数字 间隔 〈 步 长 ) 。 例 如 ，step="4"， 则 合法 值 包括 -4、0、 


4 等 。 | 
【示例 】 下 面 示例 设计 一 个 数字 输入 框 ， 并 规定 该 输入 框 接受 介 于 0 一 12 的 值 , 且 数 字 间 隔 为 4。 | 
<form action="testform.asp" method="get"> 


请 输入 数值 : <input type="number" name="numberl" min="0" max="12" step="4" /> 
<input type="submit" value=" 提 交 " /> 
</form> 


在 Chrome 浏览 器 中 的 运行 ， 如果 单 击 数字 输入 框 右 侧 的 微调 按钮 , 则 可 以 看 到 数字 以 4 为 步 进 值 | 


递增 ， 如 图 8.44 所 示 ; 如 果 输 入 不 合法 的 数值 ， 如 5， 单 击 “ 提 交 ” 按 钮 时 会 显示 错误 提示 ， 如 图 8.45 
所 示 。 


DY localhortftesti btml x 
DD localhostftestt.htr x 


@ [© localhosvtestl htm 人 | 了 
© | © localhost/testl.html 会 | : 请 给 入 数值 ， 忆 gE 


请 输入 数值 ， [可 避 [天 


回 到 和 W 入 有 效 面 ， 丙 个 量 千 用 和 有效 
重 广 别 为 4 和 8， 


图 8.44 list 属性 应 用 
8.9.8 定义 多 选 


multiple 属性 可 以 设置 输入 域 一 次 选择 多 个 值 。 适 用 于 email 和 file 类 型 的 <input> 标 签 。 
【示例 】 下 面 在 页 面 中 插入 了 一 个 文件 域 ， 使 用 multiple 属性 允许 用 户 一 次 可 提交 多 个 文件 。 
<form action="testform.asp" method="get"> 
请 选择 要 上 传 的 多 个 文件 : <input type="file" name="img" multiple /> 
<input type="submit" value=" 提 交 " /> 
</form> 


在 Chrome 浏览 器 中 的 运行 结果 如 图 8.46 所 示 。 如 果 单 击 “ 选 择 文件 ”按钮 ， 则 会 允许 在 打开 的 
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六 
对 话 框 中 选择 多 个 文件 。 选 择 文件 并 单 击 “ 提 交 ” 按 钮 后 会 关闭 对 话 框 ， 同 时 在 页 面 中 会 显示 选中 文 
， 件 的 个 数 ， 如 图 8.47 所 示 。 


DD localhostfesti ptml x DY localhostftestibtml x 


| 
加 给 | Clon EZ ] © [© ocahosytest him 3 
| 一 一 一 一 一 一 een 


请 选择 要 上 伟 的 多 个 文件 二 请 选择 要 上 传 的 多 个 文件 ， 


| 的 多 个 

i 选择 文件 让 和 牛人 晶 迁 状 文件 | 4 个 文 社 
Note 

| 

| 

| 


图 8.46 mnultiple 属性 的 应 用 图 8.47 显示 被 选中 文件 的 个 数 


8.9.9 定义 匹配 模式 


pattern 属性 规定 用 于 验证 input 域 的 模式 (pattern)。 模 式 就 是 JavaScript 正则 表达 式 ， 通 过 自 定 
视频 讲解 义 的 正则 表达 式 匹配 用 户 输入 的 内 容 ， 以 便 进行 验证 。 该 属性 适用 于 text、search、url、telephone、 
”email 和 password 类 型 的 <input> 标 签 。 
【示例 】 下 面 示例 使 用 pattern 属性 设置 文本 框 必须 输入 6 位 数 的 邮政 编码 。 
<form action="/testform.asp" method="get"> 
请 输入 邮政 编码 : <input type="text" name="zip_code" pattern="[0-9]{6}" 
tile=" 请 输入 6 位 数 的 邮政 编码 " /> 
<input type="submit" value=" 提 交 " /> 
</form> 
| 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.48 所 示 。 如 果 输 入 的 数字 不 是 6 位 ， 则 会 出 现 错误 提示 ， 
| 如 图 8.49 所 示 。 如 果 输 入 的 并 非 是 规定 的 数字 ， 而 是 字母 ， 也 会 出 现 这 样 的 错误 提示 ， 因 为 
pattern="[0- I 须 输 入 0 一 9 这 样 的 阿拉 伯 数 字 ， 并 且 必 须 为 6 位 数 。 


[locelhost/tostthtml x Pe DD localhosytectthtml x 
GC | © localhost/test1 ht |: 已 | @ localhost/test1 html 家 | ! 


请 输入 邮政 编码 : | 工 请 窒 入 邮政 编码 : [1 Ex 
提交 | 


回 次 Ss 请 不 gfs 式 保持 一 A 
请 天 入 5 位 苏 的 凶 改 竺 到 


图 8.48 ”pattem 属性 的 应 用 图 8.49 出 现 错误 提示 


， 放 提示 : 读 考 可 以 在 http /html5pattemn com 上 面 找到 一 些 常用 的 正则 表达 式 ,并 将 它们 复制 粘贴 到 
自己 的 pattem 属性 中 进行 应 用 。 


8.9.10 ”定义 替换 文本 


placeholder 属性 用 于 为 input 类 型 的 输入 框 提供 一 种 文本 提示 ， 这 些 提 示 可 以 描述 输入 框 期 待 用 
| 户 输入 的 内 容 , 在 输入 框 为 空 时 显示 , 而 当 输 入 框 获 取 焦 点 时 自动 消失 。placeholder 属性 适用 于 text、 
| search、url、telephone、email 和 password 类 型 的 <input> 标 签 。 

【示例 】 下 面 是 placeholder 属性 的 一 个 应 用 示例 。 请 注意 比较 本 例 与 上 例 提示 方法 的 不 同 。 


= 
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<form action="/testform.asp" method="get"> | 

请 输入 邮政 编码 : | 

<input type="text" name="zip_code" pattern="[0-9]{6}" | 
placeholder=" 请 输入 6 位 数 的 邮政 编码 " > | 
<input type="submit" value=" 提 交 " /> | 

</form> | 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.50 所 示 。 当 输入 框 获得 焦点 并 输入 字符 时 , 提示 

文字 消失 ， 如 图 8.51 所 示 。 


Note 


[localhosthestiht” x [DY localhosthtestiht” x 


GC | @ localhost/testi html 从 | 让 


请 箭 入 邮政 编码 二 
| 


C |@ localhost/testi ntml 从 | } 


请 入 地区 友 : 克 
| “二 


图 8.50 ”placeholder 属性 的 应 用 图 8.51 提示 消失 
8.9.11 定义 必 填 


required 属性 用 于 定义 输入 框 填写 的 内 容 不 能 为 空 ， 否 则 不 允许 提交 表单 。 该 属性 适用 于 text、 国 兴 
search、 url、 telephone、 email、 password、date pickers、number、checkbox、radio 和 file 类 型 的 <input> | 视频 讲解 
标签 。 


【示例 】 下 面 示例 使 用 required 属性 规定 文本 框 必须 输入 内 容 。 
<form action="/testform.asp" method="get"> | 
请 输入 姓名 : <input type="text" name="usr_name" required="required" /> | 
<input type="submit" value=" 提 交 " /> | 
</form> | 
在 Chrome 浏览 器 中 的 运行 结果 如 图 8.52 所 示 。 当 输入 框 内 容 为 空 并 单 击 “提交 ”按钮 时 ,会 出 | 
现 “ 请 填写 此 字段 。” 的 提示 ， 只 有 输入 内 容 之 后 才 允 许 提 交 表 单 。 | 


DY localhorthertht” x 


C [@ locahost/testi html 从 | : 


请 输入 姓名 : 
扩 ] 


回 mastsg. 


8.52 ”提示 “请 填写 此 字段 。 


8.10 HTML5 新 表单 元 素 


HTMLS 新 增 3 个 表单 元 素 : datalist、keygen 和 output， 下 面 分 别 进行 说 明 。 
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8.10.1 定义 数据 列表 


| 输入 框 上 ， 还 需要 使 用 输入 框 的 list 属性 来 引用 datalist 元 素 的 id。 


datalist 元 素 用 于 为 输入 框 提供 一 个 可 选 的 列表 , 供用 户 输入 匹配 或 直接 选择 。 如 果 不 想 从 列表 中 
选择 ， 也 可 以 自行 输入 内 容 。 

datalist 元 素 需 要 与 option 元 素 配 合 使 用 ， 每 一 个 option 选项 都 必须 设置 value 属性 值 。 其 中 
<datalist> 标 签 用 于 定义 列表 框 ，<option> 标 签 用 于 定义 列表 项 。 如 果 要 把 datalist 提供 的 列表 绑 定 到 某 


【示例 】 下 面 示例 演示 了 datalist 元 素 和 list 属性 如 何 配合 使 用 。 


<form action="testform.asp" method="get"> 
请 输入 网 址 : <input type="url" list="url list" name="weblink" /> 
<datalist id="ur] list"> 
<option label=" 新 浪 " value="http://www.sina.com.cn" /> 
<option label=" 搜 狐 " value="http://www.sohu.com" /> 
<option label=" 网 易 " value="http://www.163.com" /> 
</datalist> 
<input type="submit" value=" 提 交 " /> 
</form> 


在 Chrome 浏览 器 中 的 运行 ， 当 用 户 单 击 “请 输入 网 址 ”文本 框 之 后 ， 就 会 弹出 一 个 下 拉 网 址 列 


| 表 ， 供 用 户 选择 ， 效 果 如 图 8.53 所 示 。 


Dlocalhoctftectt html x 
@ | © localhost/test1.html 
请 容 和 网址 ， [ 


图 8.53 list 属性 应 用 


8.10.2 定义 密 钥 对 生成 器 


keygen 元 素 的 作用 是 提供 一 种 验证 用 户 的 可 靠 方法 。 
作为 密 钥 对 生成 器 当 提交 表单 时 ,keygen 元 素 会 生成 两 个 键 : 私 钥 和 公 钥 。 私 钥 存 储 于 客户 端 ; 


公 钥 被 发 送 到 服务 器 ， 公 钥 可 用 于 之 后 验证 用 户 的 客户 端 证 书 。 


目前 ， 浏 览 器 对 该 元 素 的 支持 不 是 很 理想 。 
【示例 】 下 面 是 keygen 属性 的 一 个 应 用 示例 。 
<form action="/testform.asp" method="get"> 
请 输入 用 户 名 : <input type="text" name="usr_name" /><br> 
请 选择 加 密 强 度 : <keygen name="security" /><br> 
<input type="submit" value=" 提 交 " /> 
</form> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.54 所 示 。 在 “请 选择 加 密 强度 ” 右 侧 的 keygen 


元 素 中 可 以 选择 一 种 密 铀 强度 ， 有 2048 (高 强度 ) 和 1024 (中 等 强度 ) 两 种 ， 在 Firefox 浏览 器 也 提 
| 供 两 种 选项 ， 如 图 8.55 所 示 。 
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[Dlocalhorthest1.ht x (> 放 
C |@ localhost/test1 html 合 | 3; 


请 输入 用 户 名 : 


名 
请 选择 加 密 强度 : |2048 【就 强度 》 
所 Er EE 
-本 | 1024 [中 入 8 各 ] 


请 给 入 用 户 名 : 


| 
| 
| 
| 
| 
| 
| 
了 localhosne 囊 避 |c | > 三 | 
| 
| 
| 
| 
| 
| 
| 


请 选择 加 宝 强度 : 高 | 反 
夯 ” 鲜 作风 
Note 

图 8.54 ”Chrome 浏览 器 提供 的 密 钥 等 级 图 8.55 Firefox 浏览 器 提供 的 密 钥 等 级 | 
8.10.3 ”定义 输出 结果 
output 元 素 用 于 在 浏览 器 中 显示 计算 结果 或 脚本 输出 ， 其 语法 如 下 。 
<output name="">Text</output> | 
【示例 】 下 面 是 output 元 素 的 一 个 应 用 示例 。 该 示例 计算 用 户 输入 的 两 个 数字 的 乘积 。 | 
<script type="text/javascript"> 
function multi){ | 
a=parseInt(prompt(" 请 输入 第 1 个 数字 。",0)); | 
b=parseInt(prompt(" 请 输入 第 2 个 数字 。",0)); | 
document.forms["form"]["result"].value=a*b; | 
i | 
</script> | 
<body onload="multi0"> 
<form action="testform.asp" method="get" name="form"> | 
两 数 的 乘积 为 : <output name="result"></output> | 
</form> | 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 8.56 和 图 8.57 所 示 。 当 页 面 载 入 时 ， 会 首先 提示 | 
“请 输入 第 1 个 数字 ”， 输 入 并 单 击 “ 确 定 ” 按 扭 后 再 根据 提示 “请 输入 第 2 个 数字 ”。 再 次 单 击 “ 确 | 
定 ” 按 钮 后 ， 显 示 计 算 结 果 ， 如 图 8.58 所 示 。 | 
local html 四 ey | lecalh html 可 和 -一 
| X |@ localhost/testi html 女 | : | X | ® localhost/iest html 女 | : | 
localhost 号 示 : localhost 号 示 : 和 | 
请 给 入 等 1 个 妆 主 、 知 闪 和 等 2 人 元 字 - | 
到 辐 | 
|] 华 止 此 页 再 显示 对 话 枉 . [休止 此 再 要 显示 对 活 杠 . | 
确定 BB 确定 取消 | 
图 8.56 提示 输入 第 1 个 数字 图 8.57 提示 输入 第 2 个 数字 
的 科 积 为: 1838 | 
图 8.58 ”显示 计算 结果 L 


“165。 
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8.11 HTMLS 表单 属性 


HTML5 为 form 元 素 新 增 了 两 个 属性 : autocomplete 和 novalidate， 下 面 分 别 进 行 说 明 。 
8.11.1 定义 自动 完成 


| autocomplete 属性 用 于 规定 form 中 所 有 元 素 都 拥有 自动 完成 功能 。 该 属性 在 介绍 input 属性 时 已 
经 介绍 过 ， 用 法 与 之 相同 。 

| 但 是 当 autocomplete 属性 用 于 整个 form 时 ， 所 有 从 属于 该 form 的 控件 都 具备 自动 完成 功能 。 如 
|， 果 要 关闭 部 分 控件 的 自动 完成 功能 , 则 需要 单独 设置 autocomplete="off', 具体 示例 可 参考 autocomplete 
”属性 的 介绍 。 


8.11.2 ”定义 禁止 验证 
novalidate 属性 规定 在 提交 表单 时 不 应 该 验证 form 或 input 域 。 适 用 于 <form> 标 签 ， 以 及 text、 


search、url、telephone、email、password、date pickers、range 和 color 类 型 的 <input> 标 签 。 
【示例 1】 下 面 示例 使 用 novalidate 属性 取消 了 整个 表单 的 验证 。 
<form action="testform.asp" method="get" novalidate> 
请 输入 电子 邮件 地 址 : <input type="email" name="user_email" /> 
<input type="submit" value=" 提 交 " /> 
</form> 
【补充 】 
HTMLS 为 form、input、select 和 textarea 元 素 定义 了 一 个 checkValidity0 方 法 。 调 用 该 方法 ， 可 
以 显 式 地 对 表单 内 所 有 元 素 内 容 或 单个 元 素 内 容 进行 有 效 性 验证 。checkValidity0 方 法 将 返回 布尔 值 ， 


【示例 2】 下 面 示例 使 用 checkValidity0 方 法 ， 主 动 验证 用 户 输入 的 Email 地 址 是 否 有 效 。 
<script> 
function checkO{ 


Var email = document.getElementById("email"); 
if(email.value—""){ 

alert(" 请 输入 Email 地 址 "); 

return false; 


} 

else if(!email.check ValidityO){ 
alert(" 请 输入 正确 的 Email 地 址 "); 

| return false: 

} 

| else 

| alert(" 您 输入 的 Email 地 址 有 效 "); 

} 

</script> 
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<form id=testform onsubmit="return check():;" novalidate> 
<label for=email>Email</label> 
<input name=email id=email type=email /><br/> 
<input type=submit> | ， 
</form> | 全 六 
容 提示 : 在 HTML5 中 ，form 和 input 元 素 都 有 一 个 validity 属性 ， 该 属性 返回 一 个 ValidityState | ON 
对 象 。 该 对 象 具有 很 多 属性 ， 其 中 最 简单 、 最 重要 的 属性 为 valid 属性 ， 它 表示 表单 内 | 
有 元 素 内 容 是 否 有 效 或 单个 input 元 素 内 容 是 否 有 效 。 


8.12 在 线 练 习 


本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HTMLS5 设计 表单 结构 和 样式 。 感 兴起 的 同学 
可 以 扫 码 强化 练习 。 | 


在 线 练习 1 在 线 练习 2 


= M67 


CSS3 基础 


CSS ( Cascading Style Sheet ) 表示 屋 台 样式 表 ， 定 义 如 何 泻 染 HIML 标签 ， 设 计 网 页 显 
示 效 果 。 使 用 CSS 可 以 实现 网 页 内 容 与 表现 的 分 离 ， 以 便 提 升 网 页 执行 效率 ， 方 便 后 期 和 


理 和 代码 维护 


【 学 习 重 点 】 

MI 了 解 CSS 发 展 历史 
熟悉 CSS 基本 语法 和 用 法 
灵活 使 用 CSS 选择 器 

了 解 CSS 基本 将 性 


至 至 至 
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9.1 CSS 历史 


| 1 

早期 的 HTML 结构 和 样式 是 混在 一 起 的 ， 这 就 造成 了 网 页 代码 混乱 不 堪 ， 代 码 维护 也 变 得 不 堪 ， 
重负 。1996 年 12 月 ，CSS 的 第 一 版 本 被 正式 出 版 http://www.w3.org/TR/CSS1/); 1998 年 5 月 ，CSS 车 败 疏 到 
2 版 本 正式 出 版 《http://www.w3.org/TR/CSS2/)。 | 

CSS3 的 开发 工作 在 2000 年 之 前 就 已 经 开始 ， 但 各 方 博弈 时 间 太 久 ， 
2002 年 W3C 启动 了 CSS 2.1 的 开发 ， 这 是 CSS 2.0 的 修订 版 ， 它 纠正 了 
CSS 2.0 版 本 中 的 一 些 缺 陷 ， 更 精确 地 描述 CSS 的 浏览 器 实现 ，2004 年 
CSS 2.1 正式 发 布 ， 到 2006 年 年 底 得 到 完善 ， 它 成 为 浏览 器 支持 最 完整 Ss ee 
的 版 本 。 为 了 方便 各 主流 浏览 器 根据 需要 渐进 式 支持 ，CSS3 按 模块 化 进 要 三 1 有人 和 
行 全 新 设计 ， 这 些 模块 可 以 独立 发 布 和 实现 ， 这 也 为 日 后 CSS 的 扩展 黄 定 了 基础 。 回 ， 

到 目前 为 止 ，CSS3 还 没有 推出 正式 的 完整 版 ， 但 是 已 经 陆续 推出 了 不 同 的 模块 ， 
这 些 模块 已 经 被 大 部 分 浏览 器 支持 或 部 分 实现 。 

CSS3 属性 支持 情况 请 访问 http://fimbip.conylitmus/ 详 细 了 解 。 可 以 看 出 ， 完 全 支 a 
持 CSS3 属性 的 浏览 器 包括 Chrome 和 Safari， 其 他 主流 浏览 器 也 基本 支持 。 | 

CSS3 选择 器 支持 情况 请 访问 http://fmbip.comy/litmus/ 详 细 了 解 。 除 了 三 早期 版 本 和 Firefox 3， 其 | 
他 主流 浏览 器 几乎 全 部 支持 ， 如 Chrome、Safari、Firefox、Opera。 


深 提示 : 部 分 浏览 器 允许 使 用 私有 属性 支持 CSS3 的 新 特性 ， 简 单 说 明 如 下 。 

Webkit 类 型 浏览 器 的 (如 Safari、Chrome ) 的 私有 属性 是 以 -webkit- 前 组 开始 。 
Gecko 类 型 的 浏览 器 (如 Firefox ) 的 私有 属性 是 以 -moz- 前 组 开始 。 

Konqueror 类 型 的 浏览 器 的 私有 属性 是 以 -khtml- 前 缓 开始。 

Opera 浏览 器 的 私有 属性 是 以 -0- 前 级 开始 。 

Internet Explorer 浏览 器 的 私有 属性 是 以 -ms- 前 级 开始 ，IE 8+ 支 持 -ms- 前 级 。 


图 图 图 图 加 


9.2 CSS 基本 用 法 


CSS 也 是 一 种 标识 语言 ， 可 以 在 任何 文本 编辑 器 中 编辑 。 下 面 简单 介绍 CSS 的 基本 用 法 。 
9.2.1 CSS 样式 
CSS 的 语法 单元 是 样式 ， 每 个 样式 包含 两 部 分 内 容 : 选择 器 和 声明 (或 称 为 规则 )， 如 图 9.1 所 示 。 


选择 符 样 样式 分 也 符 
p | 六 一 于 下 | 


网 页 标签 名 


[Os 
视频 讲解 


pe 
图 9.1 CSS 样式 基本 格式 


= 69. 
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选择 器 (Selector) : 指定 样式 作用 于 哪些 对 象 ， 这 些 对 象 可 以 是 某 个 标签 、 指 定 Class 或 人 D 
值 的 元 素 等 。 浏 览 器 在 解析 这 个 样式 时 ， 根 据 选择 器 来 泻 染 对 象 的 显示 效果 。 
声明 (Declaration) : 指定 浏览 器 如 何 泻 染 选择 器 匹配 的 对 象 。 声 明 包 括 两 部 分 : 属性 和 属 


全 办 性 值 ， 并 用 分 号 来 标识 一 个 声明 的 结束 ， 在 一 个 样式 中 最 后 一 个 声明 可 以 省 略 分 号 。 所 有 声 
| 明 被 放置 在 一 对 大 括号 内 ， 然 后 位 于 选择 器 的 后 面 。 
属性 (Property》: CSS 预 设 的 样式 选项 。 属 性 名 是 一 个 单词 或 多 个 单词 组 成 ， 多 个 单词 之 


间 通 过 连 字符 相连 。 这 样 能 够 很 直观 地 了 解 属性 所 要 设置 样式 的 类 型 。 

属性 值 (Value) : 定义 显示 效果 的 值 ， 包 括 值 和 单位 ， 或 者 仅 定义 一 个 关键 字 。 
【示例 】 下 面 示例 简单 演示 了 如 何在 网 页 中 设计 CSS 样式 。 

(1) 启动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml。 

(2) 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 

(3) 在 <style> 标 签 内 输入 下 面 样式 代码 ， 定 义 网 页 字体 大 小 为 24 像素 ， 字 体 颜 色 为 白色 。 
body {font-size: 24px:; color: #fff:} 

(4) 输入 下 面 样式 代码 ， 定 义 段落 文本 的 背景 色 为 蓝 色 。 
Pp { background-color: #00F; } 


(5) 在 <body> 标 签 内 输入 下 面 一 段 话 ， 然 后 在 浏览 器 中 预览 ， 则 效果 如 图 9.2 所 示 。 


<body> 
<p> 莫 等 闲 、 白 了 少年 头 ， 空 斐 切 。 </p> 
</body> 


图 9.2 使 用 CSS 定义 段落 文本 样式 


| 9.2.2 引入 CSS 样式 


在 网 页 中 ， 有 3 种 方法 可 以 正确 引入 CSS 样式 ， 让 浏览 器 能 够 识别 和 解析 。 

1. 行内 样式 

把 CSS 样式 代码 置 于 标签 的 style 属性 中 ， 例 如 : 

<span style="color:red;"> 红 色 字 体 </span> 

<div style="border:solid 1px blue; width:200px; height:200px:"></div> 

| 这 种 用 法 没有 真正 把 HTML 结构 与 CSS 样式 分 离 出 来 ， 一 般 不 建议 大 规模 使 用 。 除 非 为 页 面 中 
| 基 个 元 素 临时 设置 特定 样式 。 

2. 内 部 样式 


<style type="text/css"> 
body { 让 页 面 基 本 属性 */ 
font-size: 12px; 


A 
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color: #CCCCCC:; 


} 
/段落 文本 基础 属性 所 
Pp { background-color: #fFOOFF; } 


</style> 全 
把 CSS 样式 代码 放 在 <style> 标 签 内 。 这 种 用 法 也 称 为 网 页 内 部 样式 。 该 方法 适合 为 单 页 面 定义 
CSS 样式 ， 不 适合 为 一 个 网 站 ， 或 多 个 页 面 定义 样式 。 A 
内 部 样式 一 般 位 于 网 页 的 头 部 区 域 ， 目 的 是 让 CSS 源 代码 早 于 页 面 源 代码 下 载 并 被 解析 ， 避 免 | 
当 网 页 下 载 之 后 ， 还 无 法 正常 显示 。 
3， 外 部 样式 
把 样式 放 在 独立 的 文件 中 ， 然 后 使 用 <link> 标 签 或 者 @import 关键 字 导 入 。 一 般 网 站 都 采用 这 种 ， 
方法 来 设计 样式 ， 真 正 实现 HTML 结构 和 CSS 样式 的 分 离 ， 以 便 统筹 规划 、 设 计 、 编 辑 和 管理 CSS | 
样式 。 


9.2.3 CSS 样式 表 


样式 表 是 一 个 或 多 个 CSS 样式 组 成 的 样式 代码 段 。 样 式 表 包括 内 部 样式 表 和 外 部 样式 表 ， 它 们 | 视频 讲解 
没有 本 质 不 同 ， 只 是 存放 位 置 不 同 。 | 
内 部 样式 表 包 含 在 <style> 标 签 内 ， 一 个 <style> 标 签 就 表示 一 个 内 部 样式 表 。 而 通过 标签 的 style | 
属性 定义 的 样式 属性 就 不 是 样式 表 。 如 果 一 个 网 页 文档 中 包含 多 个 <style> 标 签 , 就 表示 该 文档 包含 了 
多 个 内 部 样式 表 。 
如 果 CSS 样式 被 放置 在 网 页 文档 外 部 的 文件 中 ， 则 称 为 外 部 样式 表 ， 一 个 CSS 样式 表 文档 就 表 | 
示 一 个 外 部 样式 表 。 实 际 上 ， 外 部 样式 表 也 就 是 一 个 文本 文件 ， 其 扩展 名 为 .css。 当 把 不 同 的 样式 复 | 
制 到 一 个 文本 文件 中 后 ， 另 存 为 .css 文件 ， 则 它 就 是 一 个 外 部 样式 表 。 | 
在 外 部 样式 表 文件 项 部 可 以 定义 CSS 源 代码 的 字符 编码 。 例 如 ， 下 面 代码 定义 样式 表 文 件 的 字 | 
符 编码 为 中 文 简体 。 | 
@charset "gb2312"; 


如 果 不 设置 CSS 文件 的 字符 编码 ， 可 以 保留 默认 设置 ， 则 浏览 器 会 根据 HTML 文件 的 字符 编码 
来 解析 CSS 代码 。 
9.2.4 导入 外 部 样式 表 


外 部 样式 表 文件 可 以 通过 两 种 方法 导入 HTML 文档 中 。 视频 讲解 
1. 使 用 <link> 标 签 

使 用 <link> 标 签 导 入 外 部 样式 表 文 件 的 代码 如 下 。 
<link href="001.css" rel="stylesheet" type="text/css" /> 

该 标签 必须 设置 的 属性 说 明 如 下 。 

href: 定义 样式 表 文件 URL。 

回 type: 定义 导入 文件 类 型 ， 同 style 元 素 一 样 。 
回 ”rel: 用 于 定义 文档 关联 ， 这 里 表示 关联 样式 表 。 


二 
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2， 使 用 @import 命令 
在 <style> 标 签 内 使 用 @import 关键 字 导 入 外 部 样式 表 文件 的 方法 如 下 。 


<style type="text/css"> 
@import url("001.css"); 
</style> 


在 @import 关键 字 后 面 ， 利 用 url0 函 数 包含 具体 的 外 部 样式 表 文 件 的 地 址 。 
“9.2.5 CSS 格式 化 


在 CSS 中 增加 注释 很 简单 ， 所 有 被 放 在 和 */ 分 阳 符 之 间 的 文本 信息 都 被 称 为 注释 ， 例 如 : 
居 注释 


| 在 CSS 中 ， 各 种 空格 是 不 被 解析 的 ， 因 此 用 户 可 以 利用 Tab 键 、 空 格 键 对 样式 表 和 样式 代码 进 
| 行 格式 化 排版 ， 以 方便 阅读 和 管理 。 


9g26 CSS 属 性 


| CSS 属性 众多 ， 在 W3C 的 CSS 2.0 版 本 中 共有 122 个 标准 属性 http://www.w3.org/TR/CSS2/ 
| propidx.html)， 在 W3C 的 CSS 2.1 版 本 中 共有 115 个 标准 属性 (http:/www.w3.org/TR/CSS21/ 
| propidx.html), 其 中 删除 了 CSS 2.0 版 本 中 7 个 属性 : font-size-adjust、 font-stretch、 marker-offset、 marks、 
| page、size 和 text-shadow。 在 W3C 的 CSS 3.0 版 本 中 又 新 增加 了 20 多 个 属性 http://www.w3.org/ 
| Style/CSS/current-workkkCSS3 )。 

| 本 节 不 再 逐个 介绍 每 个 属性 的 用 法 ， 我 们 将 在 后 面 各 章节 中 详细 说 明 ， 用 户 也 可 以 参考 CSS3 参 
| 考 手册 具体 了 解 。 


9.2.7 CSS 属性 值 


| CSS 属性 取 值 比较 多 ， 有 具体 类 型 包括 长 度 、 角 度 、 时 间 、 频 率 、 布 局 、 分 辨 率 、 颜 色 、 文 本 、 函 
数 、 生 成 内 容 、 图 像 和 数字 。 常 用 的 是 长 度 值 ， 其 他 类 型 值 将 在 相应 属性 中 具体 说 明 。 

| 下 面 重 点 介绍 一 下 长 度 值 ， 长 度 值 包括 两 类 。 

1. 绝对 值 

绝对 值 在 网 页 中 很 少 使 用 ， 一 般 用 在 特殊 的 场合 。 常 见 绝对 单位 包括 如 下 。 

英寸 (in) : 使 用 最 广泛 的 长 度 单位 。 

厘米 (cm) : 最 常用 的 长 度 单位 。 

毫米 (mm) : 在 研究 领域 使 用 广泛 。 

磅 (pt) : 也 称 点 ， 在 印刷 领域 使 用 广泛 。 

pica (pc) : 在 印刷 领域 使 用 。 


图 图 图 图 加 
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2. 相对 值 


根据 屏幕 分 辩 率 、 可 视 区 域 、 浏 览 器 设置 以 及 相关 元 素 的 大 小 等 因素 确定 值 的 大 小 。 常 见 相 对 单 
位 包括 如 下 。 | 


em: em 表示 字体 高 度 ， 它 能 够 根据 字体 的 font-size 值 来 确定 大 小 ， 例 如 : 国 A 

pt 庆 设置 段落 文本 属性 */ rs 
font-size:12px; Note 
line-height:2em:; 人 #* 行 高 为 24 像素 */ | 


} | 
从 上 面 样式 代码 中 可 以 看 出 : 一 个 em 等 于 font-size 的 属性 值 ， 如 果 设 置 font-size:12px， 则 | 
line-height:2em 就 会 等 于 24 像素 .如 果 设 置 font-size 属性 的 单位 为 em, 则 em 的 值 将 根据 父 元 素 的 fontsize | 
属性 值 来 确定 。 例 如 ， 定 义 如 下 HTML 局 部 结构 。 | 


<div id="main' 
<p>em 相对 长 度 单位 使 用 </p> 
</div> 
再 定义 如 下 样式 。 
#main{ font-size:12px;} 
Pp {font-size:2em;} 局 字体 大 小 将 显示 为 24 像素 */ 


同 理 ， 如 果 父 对 象 的 font-size 属性 的 单位 也 为 em， 则 将 依次 向 上 级 元 素 寻 找 参考 的 font-size 局 | 
性 值 ， 如 果 都 没有 定义 ， 则 会 根据 浏览 器 默认 字体 进行 换算 ， 默 认 字体 一 般 为 16 像素 。 | 
回 ex: ex 表示 字母 x 的 高 度 。 
回 px: px 根据 屏幕 像素 点 来 确定 大 小 。 这 样 不 同 的 显示 分 辨 率 就 会 使 相同 取 值 的 px Wi 
示 出 来 的 效果 截然 不 同 
回 ”%: 百分比 也 是 一 个 相对 单位 值 。 百分比 值 总 是 通过 另 一 个 值 来 确定 当前 值 ， 一 般 参 考 父 对 
象 中 相同 属性 的 值 。 例 如 ， 如 果 父 元 素 宽度 为 500px， 子 元 素 的 宽度 为 50%， 则 子 元 素 的 实 | 
际 宽度 为 250 像素 。 | 


9.3 元 素 选 择 器 


元 素 选择 器 包括 标签 选择 器 、 类 选择 器 、ID 选择 器 和 通 配 选 择 器 。 
9.3.1 标签 选择 器 


标签 选择 器 也 称 为 类 型 选择 器 ， 它 直接 引用 HTML 标签 名 称 ， 用 来 匹配 同名 的 所 有 标签 。 
回 ”优点 : 使 用 简单 ， 直 接 引用 ， 不 需要 为 标签 添加 属性 。 
中 Ww 匹配 的 范围 过 大 ， 精 度 不 够 。 
， 一 般 常用 标签 选择 器 重 置 各 个 标签 的 默认 样式 。 | 
pe 下 面 示例 统一 定义 网 页 中 段落 文本 的 样式 为 : 段落 内 文本 字体 大 小 为 12 像素 ， | 
色 为 红色 。 实 现 该 效果 ， 可 以 考虑 选用 标签 选择 器 定义 如 下 样式 。 


pl 


font-size:12px; 字体 大 小 为 12 像素 所 


a 
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color red: 诊 字体 颜色 为 红色 */ 


人 | 932 类 选择 器 


| 类 选择 器 以 点 号 (.) 为 前 级 ， 后 面 是 一 个 类 名 。 应 用 方法 :在 标签 中 定义 class 属性 ， 然 后 设置 
3 国 忆 tf 类 选择 器 的 名 称 。 
| 回 ”优点 : 能 够 为 不 同 标签 定义 相同 样式 ， 使 用 灵活 ， 可 以 为 同一 个 标签 定义 多 个 类 样式 。 
回 ”缺点 : 需要 为 标签 定义 class 属性 ， 影 响 文 档 结构 ， 操 作 相 对 麻烦 。 
【示例 】 下 面 示例 演示 如 何在 对 象 中 应 用 多 个 样式 类 。 
(1) 新 建 HIMLS 文档 ， 保 存 为 testhtml。 
(2) 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
(3) 在 <style> 标 签 内 输入 下 面 样式 代码 ， 定 义 3 个 类 样式 : red、underline 和 italic。 


必 颜色 类 所 

Ted { color red; } 谍 红 色 *#/ 
/# 下 画 线 类 所 

.underline { text-decoration: underline; } /# 下 画 线 */ 
/# 斜体 类 */ 


.italic { font-style: italic; } 

| (4) 在 段落 文本 中 分 别 引用 这 些 类 ， 其 中 第 二 段 文本 标签 引用 了 3 个 类 ， 则 演示 效果 如 图 9.3 
| 所 示 。 
”<p class="underline"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</p> 


<p class="red italic underline"> 剪 不 断 ， 理 还 乱 ， 是 离愁 。 别 是 一 般 滋味 在 心头 。</p> 
<p class="italic"> 独 自 莫 赁 栏 ， 无 限 江山 ， 别 时 容易 见 时 难 。 流 水 落花 春 去 也 ， 天 上 人 间 。</p> 


才 后 而 任 个， 无 属 江 以 ， 吻 叶 称 展 民 对 蔡 ， 荡 水 刘 闫 闽 却 芭 ， 天 上 人 司 . 


| 图 9.3 多 类 应 用 效果 
9.3.3 ID 选择 器 


| JID 选择 器 以 井 号 (#) 为 前 级 ， 后 面 是 一 个 人 D 名 。 应 用 方法 : 在 标签 中 定义 id 属性 ， 然 后 设置 
属性 值 为 ID 选择 器 的 名 称 。 


优点 : 精准 匹配 。 

缺点 : 需要 为 标签 定义 id 属性 ， 影 响 文档 结构 ， 相 对 于 类 选择 器 ， 缺 乏 灵活 性 。 
【示例 】 下 面 示例 演示 如 何在 文档 中 应 用 ID 选择 器 。 

(1) 启动 Dreamweaver， 新 建 一 个 网 页 ， 在 <body> 标 签 内 输入 <div> 标 签 。 


<div id="box"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春水 向 东 流 。</div> 
(2) 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
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(3) 输入 下 面 样式 代码 ， 为 该 盒子 定义 固定 宽 和 高 ， 并 设置 背景 图 像 ， 以 及 边框 和 内 边 距 大 小 。 | 
#box {e*ID 样式 */ 
background:url(images/1.png) center bottom; 。”/* 定义 背景 图 像 并 居中 ， 底 部 对 齐 */ 


height:200px; /# 固定 盒子 的 高 度 */ | 壁 从 
width:400px; 启 固定 盒子 的 宽度 */ | 
border:solid 2px red; /# 边框 样式 */ | 
padding:100px; 人 # 增加 内 边 距 */ | JNote 


} 
(4) 在 浏览 器 中 预览 ， 效 果 如 图 9.4 所 示 。 


图 9.4 ID 选择 器 的 应 用 


岩 提示 : 不 管 是 类 选择 器 , 还 是 ID 选择 器 ， 都 可 以 指定 一 个 限定 标签 名 ,用 于 限定 它们 的 应 用 范围 。 
例如 ， 针 对 上 面 示例 ， 在 ID 选择 器 前 面 增加 一 个 div 标签 ， 这 样 divfbox 选择 器 的 优先 级 ， 
会 大 于 box 选择 器 的 优先 级 。 在 同等 条 件 下， 浏览 器 会 优先 解析 div#box 选择 器 定义 的 样 
式 .对 于 类 选择 器 ， 也 可 以 使 用 这 种 方式 限制 类 选择 器 的 应 用 范围 ， 并 增加 其 优先 级 。 | 


9.3.4” 通 配 选 择 器 


通 配 选 择 器 使 用 星 号 (*) 表示 ， 用 来 匹配 文档 中 所 有 标签 。 
【示例 】 使 用 下 面 样式 可 以 清除 所 有 标签 的 边 距 。 
* { margin: 0; padding: 0; } 


9.4 关系 选择 器 


当 把 两 个 简单 的 选择 器 组 人 在 一 起 ， 就 形成 了 一 个 复杂 的 关系 选择 器 ， 通 过 关系 选择 器 可 以 精确 | 
匹配 HTML 结构 中 特定 范围 的 元 素 。 | 


9.4.1 包含 选择 器 | 
' 国 
包含 选择 器 通过 空格 连接 两 个 简单 的 选择 器 ， 前面 选 择 器 表示 包含 的 对 象 ， 后 面 选择 器 表示 被 包 视频 讲解 


A 
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区 


| 含 的 对 象 。 
| 优点 : 可 以 缩小 匹配 范围 。 
缺点 : 匹配 范围 相对 较 大 ， 影 响 的 层级 不 受 限制 。 

【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 在 <body> 标 签 内 输入 如 下 结构 。 


<div id="wrap"> 
<div id="header"> 
<p> 头 部 区 域 段落 文本 </p> 
</div> 
<div id="main"> 
<p> 主 体 区 域 段落 文本 </p> 
</div> 
</div> 
| 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 
， 现 如 下 设计 目标 。 
| 回 ”定义 <div id="header"> 包 含 框 内 的 段落 文本 字体 大 小 为 14 像素 。 
回 ”定义 <div id="main"> 包 含 框 内 的 段落 文本 字体 大 小 为 12 像素 。 
这 时 可 以 利用 包含 选择 器 来 快速 定义 样式 ， 代 码 如 下 。 
#header p { font-size: 14px:} 
#main p {font-size: 12px:} 


9.4.2 子 选 择 器 

| 子 选择 器 使 用 尖 角 号 (>) 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 表示 包含 的 父 对 象 ， 后 面 选择 器 
， 表示 被 包含 的 子 对 象 。 

| 回 ”优点 ， 相 对 于 包含 选择 器 ， 匹 配 的 范围 更 小 ， 从 层级 结构 上 看 ， 匹 配 目标 更 明确 。 
回 ”缺点 ， 相 对 于 包含 选择 器 ， 匹 配 范围 有 限 ， 需 要 熟悉 文档 结构 。 

【示例 】 新 建 网 页 ， 在 <body> 标 签 内 输入 如 下 结构 。 


<h2><span> 眶 美人。 春花 秋月 何 时 了 </span></h2> 
<div><span> 春 花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。 雕 栏 玉 砌 应 犹 在 ， 只 


是 朱 颜 改 。 问 君 能 有 几 多 悉 ? 恰似 一 江 春水 向 东 流 。 </span></div> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 在 内 部 样式 表 中 定义 所 有 span 元 素 的 字体 大 小 
| 为 18 像素 ， 再 用 子 选择 器 定义 h2 元 素 包 含 的 span 子 元 素 的 字体 大 小 为 28 像素 。 


， 定 义 一 个 内 部 样式 表 ， 然 后 定义 样式 ， 希 望 实 


span { font-size: 18px: } 
h2 > span { font-size: 28px: } 


在 浏览 器 中 预览 ， 显 示 效 果 如 图 9.5 所 示 。 
ESEG Cr 
虞 美人 .春花 秋月 何 时 了 


主人 人 和 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 典 
首 月 明 中 。 雕 栏 玉 砌 应 狂 在 ， 只 是 朱 颜 改 。 问 君 能 有 几 多 


恰似 一 江 奏 水 向 东 流 。 


图 9.5 子 选择 器 应 用 
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9.4.3 相 邻 选择 器 


| 回 
相 邻 选择 器 使 用 加 号 +) 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 指定 相 邻 的 前 面 一 个 元 素 ， 后 面 ， 视频 资 角 
选择 器 指定 相 邻 的 后 面 一 个 元 素 。 鲜 | 
回 ”优点 在 结构 中 能 够 快速 、 准 确 地 找到 同 
级 、 相 邻 元 素 。 皮 关 人 -春花 秋月 何 时 了 | Note 
加 ”缺点 使 用 前 需要 熟悉 文档 结构 。 3 


春花 秋月 何 时 了 ? 福地 知 多 少 。 小 迟 蜂 夜叉 东风 ， 故 国 不 烂 回 贡 月 明 中 。 


【示例 】 下 面 示例 通过 相 邻 选择 器 快速 匹配 出 在 和。 同和? 闪 - 冰 人 


标题 下 面相 邻 的 P 元 素 ， 并 设计 其 包含 的 文本 居中 
显示 ， 效 果 如 图 9.6 所 示 。 图 9.6 相 邻 选择 器 的 应 用 

<style type="text/css"> 

h2, h2 + p { text-align: center; } 

</style> 

<h2> 眶 美人。 春花 秋月 何 时 了 </h2> 

<p> 李 煜 </p> 

<p> 春 花 秋 月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。 </p> 

<p> 雕 栏 玉 砌 应 犹 在 ， 只 是 朱 颜 改 。 问 君 能 有 几 多 愁 ? 恰似 一 江 春水 向 东 流 。 </p> 


如 果 不 使 用 相 邻 选择 器 ， 用 户 需 要 使 用 类 选择 器 来 设计 ， 这 样 就 相对 麻烦 很 多 。 
9.4.4 兄弟 选择 器 


兄弟 选择 器 使 用 波浪 符号 〈~) 连接 两 个 简单 的 选择 器 ， 前 面 选 择 器 指定 同 级 的 前 置 元 素 ， 后 面 | 
选择 器 指定 其 后 同 级 所 有 匹配 的 元 素 。 | 

优点 : 在 结构 中 能 够 快速 、 准 确 地 找到 同 级 靠 后 的 元 素 。 

加 ”缺点 : 使 用 前 需要 熟悉 文档 结构 ， 匹 配 精度 没有 相 邻 选 择 器 具体 。 | 

【示例 】 以 9.4.3 节 示例 为 基础 ， 添 加 如 下 样式 ， 定 义 标题 后 面 所 有 段落 文本 的 字体 大 小 为 14 像 | 
素 ， 字 体 颜 色 为 红色 。 

h2 ~p { font-size: 14px; color red: } 

在 浏览 器 中 预览 ， 页 面 效果 如 图 9.7 所 示 。 
可 以 看 到 兄弟 选择 器 匹配 的 范围 包含 了 相 邻 选 择 
器 匹配 的 元 素 。 


9.4.5 “分 组 选择 器 


分 组 选择 器 使 用 逗号 (,) 连接 两 个 简单 的 先 
择 器 ， 前 面 选择 器 匹配 的 元 素 与 后 面 选择 器 匹配 图 9.7 兄弟 选择 器 的 应 用 
的 元 素 混合 在 一 起 作为 分 组 选择 器 的 结果 集 。 

回 ”优点 : 可 以 合并 相同 样式 ， 减 少 代码 宛 余 。 

回 ”缺点 ， 不 方便 个 性 管理 和 编辑 。 

【示例 】 下 面 示例 使 用 分 组 将 所 有 标题 元 素 统一 样式 。 

hl, h2, h3, h4, h5, h5, h6 { 

margin: 0; 上 # 清除 标题 的 默认 外 边 距 */ 


= 
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margin-bottom: 10px; 上 证 使 用 下 边 距 拉 开 标题 距离 */ 


9.5 属性 选择 器 


属性 选择 器 是 根据 标签 的 属性 来 匹配 元 素 ， 使 用 中 括号 进行 标识 。 
[属性 表达 式 ] 


CSS3 包括 7 种 属性 选择 器 形式 ， 下 面 结合 示例 具体 说 明 如 下 。 
【示例 】 下 面 示例 设计 一 个 简单 的 图 片 灯箱 导航 ， 其 中 HTML 结构 如 下 。 


<div class="pic_box"> 

<img sre="images/bgl.jpg" /> 

<div class="nav"> 
<a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a> 
<a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a> 
<a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a> 
<a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a> 
<a href="#5" class="links item" title="zh-cn">5</a> 
<a href="#6" class="links item" title="website link" lang="zh">6</a> 
<a href="#7" class="links item" title="open the website" lang="cn">7</a> 
<a href="#8" class="links item" title="close the website" lang="en-zh">8</a> 
<a href="#9" class="links item" title="http://www.baidu.com">9</a> 
<a href="#10" class="links item last" id="last">10</a> 


</div> 
</div> 
使 用 CSS 适当 美化 ， 具 体 样式 代码 请 参考 本 节 示 例 源 代码 ， 初 始 预览 效果 如 图 9.8 所 示 。 
1. Efattr] 


选择 具有 attr 属性 的 EE 元 素 ， 例 如: 
.nav a[id] {background: blue:; color: yellow:; font-weight: bold:} 
上 面 代码 表示 : 选择 divnav 下 所 有 带 有 id 属性 的 a 元素， 并 在 这 个 元 素 上 使 用 背景 色 为 蓝 色 ， 


前 景色 为 黄色 ， 字 体 加 粗 的 样式 。 对 照 上 面 的 HTML 结构 ， 不 难 发 现 ， 只 有 第 一 个 和 最 后 一 个 链接 
| 使 用 了 id 属性 ， 所 以 选中 了 这 两 个 a 元 素 ， 效 果 如 图 9.9 所 示 。 
也 可 以 指定 多 属性 如 下 。 


.nav a[hrefl[title] {background: yellow; color: green:} 
上 面 代码 表示 的 是 选择 divnav 下 元 素 的 同时 具有 href 和 title 两 个 属性 的 a 元 素 ， 效 果 如 图 9.10 


2.E[attr="value"] 
选择 具有 attr 属性 ， 且 属性 值 等 于 value 的 王 元 素 ， 例 如 : 
.nav a[id="first"] {background: blue; color: yellow; font-weight: bold;} 


选中 divnav 中 的 a 元 素 ， 且 这 个 元 素 有 一 个 id="first" 属 性 值 ， 则 预览 效果 如 图 9.11 所 示 。 


“78:s 


第 9 章 CSS3 基础 


E[attr="value"] 属 性 选择 器 也 可 以 多 个 属性 并 写 ， 进 一 步 缩小 选择 范围 ， 用 法 如 下 所 示 ， 则 预览 
效果 如 图 9.12 所 示 。 | 

“nav a[href="#1"][title] {background: yellow; color: green:} 
68660660690 

图 99 属性 快速 匹配 NUE 
123@567s850@ | 

图 9.10 多 属性 快速 匹配 
O000060000@ 

图 9.11 属性 值 快速 匹配 
19090600600 
图 9.8 设计 的 灯箱 导航 效果 图 图 9.12 多 属性 值 快速 匹配 
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3. Elattr~="value"] 


选择 具有 attr 属性 ， 且 属性 值 为 一 用 空格 分 隔 的 字 词 列表 ， 其 中 一 个 等 于 value 的 元 素 。 包含 
只 有 一 个 值 ， 且 该 值 等 于 val 的 情况 ， 例 如 


.nav a[title~="website"]{background: orange; color: green:} | 

在 divnav 下 的 a 元 素 的 title 属性 中 ， 只 要 其 属性 值 中 含有 "website" 这 个 词 就 会 被 选择 ， 结 果 a 
元 素 中 2、6、7、8 这 4 个 a 元 素 的 title 中 都 含有 这 个 词 ， 所 以 被 选中 ， 如 图 9.13 所 示 。 | 

4. Elattr^="value"] 

选择 具有 attr 属性 ， 且 属性 值 为 以 value 开头 的 字符 串 的 王 元 素 ， 例 如 : 


.nav altitle^="http://"] {background: orange; color: green:} 
.nav altitle^="mailto:"] {background: green; color: orange;} 


上 面 代码 表示 的 是 选择 了 以 title 属性 ， 并 且 以 "http:/" 和 "mailto:" 开 头 的 属性 值 的 所 有 a 元 素 ， 匹 
配 效果 如 图 9.14 所 示 。 
00606600660 0060000000 
图 9.13 属性 值 局 部 词 匹配 图 9.14 匹配 属性 值 开头 字符 串 的 元 素 


5. Elattr$="value"] 

选择 具有 attr 属性 ， 且 属性 值 为 以 value 结尾 的 字符 串 的 EE 元 素 ， 例 如 : 
nav afhref$="png"] {background: orange:; color: green;} 

上 面 代码 表示 选择 divnav 中 元 素 有 href 属性 ， 并 以 为 png 结尾 的 a 元素。 
6. Elattr*="value"] 

选择 具有 attr 属性 ， 且 属性 值 为 包含 value 的 字符 串 的 元素 ， 例 如 : 
.nav altitle*="site"] {background:black:color:white:} 
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| 上 面 代码 表示 选择 divnav 中 a 元 素 的 title 
， 果 如 图 9.15 所 示 。 


属性 中 只 要 有 "site" 字 符 串 就 可 以 。 上 面 样式 的 预览 效 


7. Elattr|="value"] 


| 选择 具有 attr 属性 ,其 值 是 以 value 开头 ,并 用 连接 符 "" 分 隔 的 字符 串 的 卫 元 素 ;如 果 值 仅 为 value， 


也 将 被 选择 ， 例 如 : 
ee 


.nav a[lang|="zh"]{background: gray: color: yellow:} 


上 面 代码 会 选中 divnav 中 lang 属性 等 于 办 或 以 办 -开头 的 所 有 a 元 素 ， 如 图 9.16 所 示 。 
O000000000 O000000000 


图 9.15 匹配 属性 值 中 的 特定 子 串 


图 9.16 ”匹配 属性 值 开 头 字符 串 的 元 素 
9.6 人 擅 选 择 器 


| 伪 选 择 器 包括 伪 类 选择 器 和 伪 对 象 选择 器 ， 伪 选择 器 能 够 根据 元 素 或 对 象 的 特征 、 状 态 、 行 为 进 
| 行 匹配 。 
伪 选 择 器 以 冒号 〈:) 作为 前 缀 标识 符 。 冒 号 前 可 以 添加 限定 选择 符 ， 限 定 伪 类 应 
| 号 后 为 伪 类 和 伪 对 象 名 ， 冒 号 前 后 没有 空格 。 
| CSS 伪 类 选择 器 有 两 种 用 法 方式 。 

1. 单纯 式 


的 范围 ， 冒 


E:pseudo-class { property:value} 


其 中 ，E 为 元 素 ，pseudo-class 为 伪 类 名 称 ，property 是 CSS 的 属性 ，value 为 CSS 的 属性 值 ， 例 如 : 
alink {color:red;} 


2. 混用 式 


E.class:pseudo-class{property:value} 


| 其 中 ，.class 表示 类 选择 符 。 把 类 选择 符 与 伪 类 选择 符 组 成 一 个 混合 式 的 选择 器 ， 能 够 设计 更 复 
| 杂 的 样式 ， 以 精准 匹配 元 素 ， 例 如 : 


a.selected:hover {color: blue:} 
CSS3 支持 的 伪 类 选择 器 具体 说 明 如 表 9.1 所 示 ，CSS3 支持 的 伪 对 象 选择 器 具体 说 明 如 表 9.2 所 示 。 
表 9.1 伪 类 选择 器 列表 


| 选择 器 说 明 
| Bak | 设置 超 链接 a 在 未 被 访问 前 的 样式 
Bevisited | 设置 超 链接 a 在 其 链接 地 址 已 被 访问 过 时 的 样式 
Bhover | 设置 元 素 在 其 鼠标 悬 停 时 的 样式 
E:active 设置 元 素 在 被 用 户 激活 在 鼠标 单 击 与 释放 之 间 发 生 的 事件 ) 时 的 样式 
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续 表 
选 择 器 说 了 明 
E:focus 设置 对 象 在 成 为 输入 焦点 时 的 样式 
E:lang(fr) 匹配 使 用 特殊 语言 的 元 素 
E:not(s) 匹配 不 含有 s 选择 符 的 元 素 E。CSS3 新 增 
E:root 匹配 EE 元 素 在 文档 的 根 元 素 。 在 HTML 中 ， 根 元 素 永 远 是 HTML。CSS3 新 增 
E:first-child 匹配 父 元 素 的 第 一 个 子 元 素 E。CSS3 新 增 
E:last-child 匹配 父 元 素 的 最 后 一 个 子 元 素 E。CSS3 新 增 
E:only-child 匹配 父 元 素 仅 有 的 一 个 子 元 素 E。CSS3 新 增 
E:nth-child(n) 匹配 父 元 素 的 第 n 个 子 元 素 E， 假 设 该 子 元 素 不 是 E， 则 选择 符 无 效 。CSS3 新 增 


E:nth-last-child(n 


匹配 父 元 素 的 倒数 第 n 个 子 元 素 E， 假 设 该 子 元 素 不 是 E， 则 选择 符 无 效 。CSS3 新 增 


E-first-of-type 


匹配 同类 型 中 的 第 一 个 


同 级 兄弟 元 素 E。CSS3 新 增 


匹配 同 


匹配 同类 型 中 的 唯一 的 


类 型 中 的 最 后 一 个 同 级 兄弟 元 素 E。CSS3 新 增 


-个 同 级 兄弟 元 素 E。CSS3 新 增 


匹配 同 


类 型 中 的 第 n 个 


同 级 兄弟 元 素 E。CSS3 新 增 


匹配 没有 任何 子 元 素 (包括 text 节点 ) 的 元 素 E。CSS3 新 增 


Enth-last-of-type(n) | 匹配 同类 型 中 的 倒数 第 n 个 同 级 兄弟 元 素 E。CSS3 新 增 | 


E:eml 


ra 匹配 用 户 界面 处 于 选中 状态 的 元 素 E。 注意 , 用 于 input 的 type 为 radio 与 checkbox 时 。 
CSS3 新 增 
E:enabled 匹配 用 户 界面 上 处 于 可 用 状态 的 元 素 E。CSS3 新 增 
E:disabled 匹配 用 户 界面 上 处 于 禁 的 元 素 E。CSS3 新 增 | 
E:target 匹配 相关 URL 指向 的 E 元 素 。CSS3 新 增 | 
age :first 设置 在 打印 时 页 面容 器 第 一 页 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 | 


设置 页 面容 器 位 于 装订 线 左边 的 所 有 页 面 使 用 的 样式 。 尝 


于 @page 规则 


设置 页 面容 器 位 于 装订 线 右边 的 所 有 页 面 使 用 的 样式 。 注 意 ， 


于 @page 规则 


选 择 器 


E:first-letter/E::first-letter 


E:first-line/E::first-line 


E:before/E::before 


E:after/E::after 


表 9.2 伪 对 象 选择 器 列表 


说 了 明 


设置 对 象 内 的 第 一 个 字符 的 样式 。 注 意 ， 仅 作用 于 块 对 象 。CSS3 完善 


设置 对 象 内 的 第 一 行 的 样式 。 注 意 ， 仅 作用 于 块 对 象 。CSS3 完善 
设置 在 对 象 前 发 生 的 内 容 。 与 content 属性 一 起 使 用 , 且 必 须 定义 content 属性 .CSS3 


完善 


设置 在 对 象 后 发 生 的 内 容 . 与 content 属性 一 起 使 用 , 且 必须 定义 content 属性 .CSS3 


= 
完善 


E::placeholder 


E::selection 


设置 对 象 文字 占 位 符 的 样式 。CSS3 新 增 
设置 对 象 被 选择 时 的 样式 。CSS3 新 增 


介绍 两 种 伪 类 选择 器 的 使 用 。 


【示例 1】:notO 表 示 和 否定 伪 类 选择 器 ， 即 过 滤 掉 not0 函 数 


于 CSS3 伪 选 择 器 众多 ， 请 读者 参考 CSS3 参考 手册 详细 了 解 。 限 于 篇 幅 ， 下 面 仅 结合 示例 ， 


匹配 的 特定 元 素 。 下 面 示例 为 页 面 中 ， 


所 有 段落 文本 设置 字体 大 小 为 24 像素 ， 然 后 使 用 :not(CauthoD 排 出 第 一 段 文 本 ， 设 置 其 他 段落 文本 的 ， 
字体 大 小 为 14 像素 ， 显 示 效 果 如 图 9.17 所 示 。 


.181 


| 
人 


| eR [网 交 设 计 与 网 站 建设 从 入 门 到 精通 ( 微 课 精 编 版 ) 


<style type="text/css"> 

P { font-size: 24px; } 

Pp:not(.author){ font-size: 14px: } 

</style> 

<h2> 虞 美人。 春花 秋月 何 时 了 </h2> 

<p class="author"> 李 煜 </p> 

<p> 春 花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。</p> 
| <p> 雕 栏 玉 砌 应 犹 在 ， 只 是 朱 颜 改 。 问 君 能 有 几 多 悉 ? 恰似 一 江 春水 向 东 流 。</p> 


目标 伪 类 选择 器 类 型 形式 如 E:target， 它 表示 选择 匹配 E 的 所 有 元 素 , 且 匹 配 元 素 被 相关 URL 指 


【示例 2】 下 面 示例 设计 当 单 击 页 面 中 的 锚 点 链接 ， 跳 转 到 指定 标题 位 置 时 ， 该 标题 会 自动 高 亮 

显示 ， 以 提醒 用 户 ， 当 前 跳 转 的 位 置 ， 效 果 如 图 9.18 所 示 。 

<style type="text/css"> 

尾 设计 导航 条 固定 在 窗口 右上 角 位 置 显示 */ 

hl{ position:fixed; right:12px; top:24px:} 

上 # 让 锚 点 链接 堆 若 显示 */ 

hl af display:block:} 

必 设计 锚 点 链接 的 目标 高 亮 显示 */ 

h2:target { background:hsla(93,96%,62%,1.00); } 


</style> 
<h1><a hre 全 "元 1"> 图 片 1</a> <a hre 伍 "#2"> 图 片 2</a> <a hre 全 "各 3" 图 片 3</a> <a hre 伍 "#p4"> 图 片 4</a> <hl> 
<h2 id="p1"> 图 片 1</h2> 


<p><img src="images/1.jpg" /></p> 
<h2 id="p2"> 图 片 2</h2> 
<p><img src="images/2.jpg" ></p> 
<h2 id="p3"> 图 片 3</h2> 
<p><img src="images/3.jpg" /></p> 
<h2 id="p4"> 图 片 4</h2> 
<p><img src="images/4.jpg" /></p> 
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上 针 美 人 .春花 秋月 何 时 了 
李煜 


春花 秋月 何 时 了 9 往事 知 多 少 。 小 楼 昨夜 只 东风 ， 故 于 不 典 回 首 月 归 中 。 
册 栏 玉 币 应 锭 在 ， 只 是 朱 部 改 。 问 寻 能 有 几 允 悉 ? 恰似 一 江青 水 向 东 流 。 


图 9.17 否定 伪 类 的 应 用 图 9.18 目标 伪 类 样式 应 用 效果 


| 【示例 3】 下 面 示例 使 用 :before 伪 对 象 选择 器 在 段落 文本 前 面 添加 3 个 字符 “ 柳 永 : ”， 然 后 使 
| 用 :first-letter 伪 对 象 选择 器 设置 段落 文本 第 一 个 字符 放大 显示 ， 定 义 字 体 大 小 为 24 像素 ， 则 效果 如 
”图 9.19 所 示 。 
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第 9 章 CSS3 基础 | 
<style type="text/css"> | 
Pibefore { content: ' 柳 永 : ';} 

Pp:first-letter { font-size: 24px;} 
</style> 
<p> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 。</p> 


加 -| wecnc- - Eo Note 


柳 永 ， 衣 带 涛 膏 终 不 悔 ， 为 伊 消 得 人 慌 入 。 


图 9.19 定义 第 一 个 字符 放大 显示 


【示例 4】 下 面 示例 使 用 :first-letter 伪 对 象 选 择 器 设置 段落 文本 第 一 个 字符 放大 下 沉 显 示 ， 并 使 
用 :first-line 伪 对 象 选 择 器 设置 段落 文本 第 一 行 字符 放大 带 有 阴影 显示 ， 效 果 如 图 9.20 所 示 。 | 


<style type="text/css"> | 
pf font-size:18px; line-height:1.6em:} | 
p:first-letter { 让 段落 文本 中 第 一 个 字符 样式 */ | 
float: left; | 
font-size: 60px; | 
font-weight: bold; | 
margin: 26px 6px; | 
} | 
p:first-line { /# 段落 文本 中 第 一 行 字符 样式 */ | 
color: red; | 
font-size: 24px; | 
text-shadow: 2px 2px 2px rgba(147,251,64,1); | 
} | 
</style> 


<p> 我 在 膀胱 中 ， 眼 前 展开 一 片 海边 泊 绿 的 沙 地 来 ， 上 面 深蓝 的 天 空中 挂 着 一 轮 金黄 的 圆 月 。 我 想 : 希望 本 | 
是 无 所 谓 有 ， 无 所 谓 无 的 。 这 正如 地 上 的 路 ;其 实地 上 本 没有 路 ， 走 的 人 多 了 ， 也 便 成 了 路 。</p> | 
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在 脐 肛 中 ， 眼 前 展开 一 片 海边 萎 绿 的 沙 地 来 ， 上 面 深蓝 在 膀胱 中 ， 眼 前 展开 一 片 海边 英 绿 的 沙 


的 天 空中 挂 着 一 轮 全 页 的 图 月 -我 想 : 希望 本 是 无 所 谓 有 ， 无 所 谓 无 的 - 地 来 ， 上 面 深蓝 的 天 空中 挂 着 一 轮 金黄 的 图 月 。 我 
这 正如 地 上 的 路 : 其 实地 上 本 没有 路 ， 走 的 人 多 了 ， 也 便 成 了 路 想 : 希望 本 是 无 所 请 有 ， 无 所 请 无 的 .这 正如 地 上 的 
路 ; 其 实地 上 本 没有 路 ， 走 的 人 多 了 ， 也 便 成 了 路 - 


图 9.20 定义 第 一 个 字符 和 第 一 行 字符 特殊 显示 


9.7 CSS 特性 


CSS 样式 具有 两 个 特性 : 继承 性 和 层 伙 性， 下 面 分 别 进行 说 明 。 | 

9.7.1 CSS 继承 性 | 
| 回 

CSS 继承 性 是 指 后 代 元 素 可 以 继承 祖先 元 素 的 样式 。 继 承 样式 主要 包括 字体 、 文 本 等 基本 属性 ， 上 视频 讲解 


8. 


网 设计 与 网 站 建设 从 入 门 到 精通 ( 微 课 精 编 版 ) 


”如 字体 、 字 号 、 颜 色 、 行 距 等 ， 对 于 下 面 关 型 属性 是 不 允许 继续 的 : 边框、 边界 、 补 白 、 背景 、 定 位 、 
， 布 局、 尺寸 等 


， 次 提示 ， 灵 活 应 用 CSS 继承 性 ， 可 以 优化 CSS 代码， 但 是 继续 的 样式 的 优先 级 是 最 低 的 。 


攻克 【示例 】 下 面 示例 在 body 元 素 中 定义 整个 页 面 的 字体 大 小 、 字 体 颜 色 等 基本 页 面 属性 ， 这 样 包 
含 在 body 元 素 内 的 其 他 元 素 都 将 继承 该 基本 属性 ， 以 实现 页 面 显 示 效 果 的 统一 。 
| 新 建 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 输入 如 下 代码 ， 设 计 一 个 多 级 嵌 套 结构 。 
<div id= "wrap"> 
<div id="header"> 
<div id="menu"> 
<ul> 
<li><span> 首 页 </span></li> 
<H> 菜 单项 </li> 
</u> 
</div> 
<div id="main"> 
<p> 主 体内 容 </p> 
</div> 
</div> 
| 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 内 部 样式 表 ， 然后 为 body 定义 字体 大 小 为 
| 12 像素 ， 通 过 继承 性 ， 则 包含 在 body 元 素 的 所 有 其 他 元 素 都 将 继承 该 属性 ， 并 显示 包含 的 字体 大 小 
| 为 12 像素 。 在 浏览 器 中 预览 ， 显 示 效果 如 图 9.21 所 示 。 
| body {font-size:12px;} 
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| 图 9.21 CSS 继承 性 演示 效果 
9.7.2 CSS 层 琶 性 


CSS 层 登 性 是 指 CSS 能 够 对 同一 个 对 象 应 用 多 个 样式 的 能 力 。 
【示例 1】 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 输入 如 下 代码 。 
<div id="wrap"> 看 看 我 的 样式 效果 </div> 
在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 分 别 添加 两 个 样式 。 


div {font-size:12px;} 
div {font-size:14px;} 


| 两 个 样式 中 都 声明 相同 的 属性 ， 并 应 用 于 同一 个 元 素 上 。 在 浏览 器 中 测试 ， 则 会 发 现 最 后 字体 显 
| 示 为 14 像素 ， 也 就 是 说 14 像素 字体 大 小 覆盖 了 12 像素 的 字体 大 小 ， 这 就 是 样式 层 车 。 
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当 多 个 样式 作用 于 同一 个 对 象 ， 则 根据 选择 器 的 优先 级 ， 确 定 对 象 最 终 应 用 的 样式 。 
标签 选择 器 : 权重 值 为 1。 

伪 元 素 或 伪 对 象 选 择 器 : 权重 值 为 1。 

类 选择 器 : 权重 值 为 10。 

属性 选择 器 : 权重 值 为 10。 

ID 选择 器 : 权重 值 为 100。 

其 他 选择 器 : 权重 值 为 0， 如 通 配 选 择 器 等 。 

然后 ， 以 上 面 权 值 数 为 起 点 来 计算 每 个 样式 中 选择 器 的 总 权 值 数 。 其 计算 规则 如 下 。 
回 ”统计 选择 器 中 ID 选择 器 的 个 数 ， 然 后 乘 以 100。 

回 ”统计 选择 器 中 类 选择 器 的 个 数 ， 然 后 乘 以 10。 

回 ”统计 选择 器 中 的 标签 选择 器 的 个 数 ， 然 后 乘 以 1。 


图 图 图 图 图 加 


哪个 样式 的 优先 级 大 。 
【示例 2】 新建 一 个 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 输入 如 下 代码 。 


<div id="box" class="red">CSS 选择 器 的 优先 级 </div> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 添 加 如 下 样式 。 


body div#box { border:solid 2px red:} 
#box {border:dashed 2px blue:} 
div.red {border:double 3px red;} 


对 于 上 面 的 样式 表 ， 可 以 这 样 计算 它们 的 权重 值 。 


body div#box =1+1+ 100= 102; 
#box = 100; 
dired=1+10=11; 


以 此 类 推 ， 最 后 把 所 有 权重 值 数 相 加 ， 即 可 得 到 当前 选择 器 的 总 权重 值 ， 最 后 根据 权重 值 来 决定 | 


因此 ， 最 后 的 优先 级 为 body div#box 大 于 #box,#box 大 于 dired。 所 


宽 的 红色 实 线 ， 在 浏览 器 中 预览 ， 显 示 效果 如 图 9.22 所 示 。 
[enn o- a0] sms 


从 提示 :与 样式 表 中 样式 相 比 ， 行 内 样式 优先 级 最 高; Es 
相同 权重 值 时 ， 样 式 最 近 的 优先 级 最 高 ; 使 
用 !important 命令 定义 的 样式 优先 级 绝对 
高 ; !important 命令 必须 位 于 属性 值 和 分 号 之 
间 , 如 #header {color:Redlimportant;}, 否则 无 效 。 图 9.22 CSS 优先 级 的 样式 演示 效果 


9.8 在 线 练 习 


码 强化 练习 。 


在 线 练习 2 
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本 节 为 同学 们 提供 了 多 个 课外 练习 ， 以 便 灵 活 使 用 CSS， 强 化 基本 功 训练 。 感 兴趣 的 同学 可 以 扫 


| 
人 


使 用 CSS3 美化 网 页 文本 和 图 像 


人 人 靠 衣装 ， 网 页 也 需要 修饰 ，CSS3 为 字体 和 文本 提供 大 量 的 属性 ， 如 字体 的 类 型 、 大 
小 和 颜色 等 ， 文 本 的 对 齐 、 间 距 、 缩 进 和 行 高 等 ， 本 章 将 重点 讲解 CSS3 字体 和 文本 样式 
由 于 文本 与 图 片 在 网 页 中 紧密 排版 在 一 起 ， 本 章 还 介绍 图 片 的 常用 样式 设计 


【 学 习 重 点 】 

WI 定义 字体 类 型 、 大 小 、 颜 色 等 基本 样式 

WI 设计 文本 基本 版 式 ， 如 对 齐 、 行 高 、 间 距 等 
WI 设计 图 像 的 基本 样式 

WI 能 够 灵活 设计 美观 、 实 用 的 图 文 版 式 
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10.1 设计 字体 样式 


字体 样式 包括 类 型 、 大 小 、 颜 色 、 粗 细 、 下 画 线 、 斜 体 、 大 小 写 等 。 下 面 分 别 进 行 介 绍 。 
10.1.1 定义 字体 类 型 


使 用 font-family 属性 可 以 定义 字体 类 型 ， 用 法 如 下 。 
font-family: name 


name 表示 字体 名 称 ， 可 以 设置 字体 列表 ， 多 个 字体 按 优 先 顺 序 排列 ， 以 逗号 分 隔 。 

如 果 字 体 名 称 包含 空格 ， 则 应 使 用 引号 括 起 。 第 二 种 声明 方式 使 用 所 列 出 的 字体 序列 名 称 ， 2 
使 用 fantasy 序列 ， 将 提供 默认 字体 序列 。 

【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testl.html， RT 
文本 。 


<p> 月 落 乌 啼 霜 满 天 ， 江 枫 汐 火 对 悉 眼 。</p> 
<p> 姑 苏 城 外 寒山 地， 夜半 钟 声 到 客船 。</p> 


在 <head> 标 签 内 添加 <style type-"textess'> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 用 | 
来 定义 网 页 字体 的 类 型。 


pl 让 段落 样式 */ 
font-family: "隶书 "; /# 隶书 字体 所 


} 
在 浏览 器 中 预览 效果 如 图 10.1 所 示 。 


‘0 ES hp//ocalhosttestt - Bo |‖ E localhost 


月 落 乌 喻 笨 满 天 ， 江 机 他 火 对 恶 眠 。 


姑 游 城 外 寒山 村 ， 夜 半 钟 声 到 客船 。 


图 10.1 设计 隶书 字体 效果 
10.1.2 ”定义 字体 大 小 


使 用 CSS3 的 font-size 属性 可 以 定义 字体 大 小 ， 用 法 如 下 。 
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length 


其 中 ，xx-small (最 小 )、x-small( 较 小 )、small (小 )、medium (正常 )、large (大 )、x-large 懂 ， 
大 )、xx-large (最大) 表示 绝对 字体 尺寸 ， 这 些 特殊 值 将 根据 对 象 字 体 进行 调整 。 | 
larger〈 增 大 ) 和 smaller (减少 ) 这 对 特殊 值 能 够 根据 父 对 象 中 字体 尺寸 进行 相对 增 大 或 者 缩小 | 
理 ， 使 用 成 比例 的 em 单位 进行 计算 。 


时 
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| length 可 以 是 百分数 ， 或 者 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 但 不 可 为 负 值 。 其 百分比 取 值 
| 是 基于 父 对 象 中 字体 的 尺寸 来 计算 ， 与 em 单位 计算 相同 。 
| 【示例 】 下 面 示例 演示 如 何 为 网 页 定义 字体 大 小 。 


优 启动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <head> 标 签 内 添加 <style type="text/css"> 
7 标签， 定义 一 个 内 部 样式 表 。 
Note 然后 输入 下 面 样式 ， 分 别 设置 网 页 字体 默认 大 小 ， 正 文字 体 大 小 ， 以 及 栏目 中 字体 大 小 。 
| body {font-size:12px;} 让 以 像素 为 单位 设置 字体 大 小 */ 
Pp {font-size:0.75em;} 谍 以 父辈 字体 大 小 为 参考 设置 大 小 */ 
div {font:9pt Arial, Helvetica, sans-serif} /# 以 点 为 单位 设置 字体 大 小 */ 


”10.1.3 ”定义 字体 颜色 
| 使 用 CSS3 的 color 属性 可 以 定义 字体 颜色 ， 用 法 如 下 。 


color: color 


| 参数 color 表示 颜色 值 ， 取 值 包括 颜色 名 、 十 六 进 制 值 、RGB 等 颜色 函数 ， 详 细 说 明 请 参考 CSS3 
参考 手册 。 
【示例 】 下 面 示例 演示 了 在 文档 中 定义 字体 颜色 。 


| 启动 Dreamweaver， 新 建 一 个 网 页 ， 保存 为 test.html， 在 <head> 标 签 内 添加 <style type="text/css"> 
| 标签， 定义 一 个 内 部 样式 表 。 
| 然后 输入 下 面 样式 ， 分 别 定 义 页 面 、 段 落 文本 、<div> 标 签 、<span> 标 签 包 含 字体 颜色 。 


body { color: gray;} 人 # 使 用 颜色 名 */ 

Pp { color: #666666;} 上 旋 使 用 十 六 进 制 */ 

div { color: rgb(120,120,120):;} /# 使 用 RGB */ 

span { color: rgb(50%,50%,50%);} 证 使 用 RGB */ 
10.1.4 定义 字体 粗细 


视频 讲解 | ”使 用 CSS3 的 font-weight 属性 可 以 定义 字体 粗细 ， 用 法 如 下 。 
| font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 


| 其 中 ，normal 为 默认 值 ， 表 示 正 常 的 字体 ， 相 当 于 取 值 为 400。bold 表示 粗 体 ， 相 当 于 取 值 为 700， 
| 或 者 使 用 <b > 标签 定义 的 字体 效果 。 

| bolder( 较 粗 ) 和 lighter〔 较 细 ) 相对 于 normal 字体 粗细 而 言 。 

| 另外 ， 也 可 以 设置 值 为 100、200、300、400、500、600、700、800、900， 它 们 分 别 表示 字体 的 
| 粗细 ， 是 对 字体 粗细 的 一 种 量化 方式 ， 值 越 大 就 表示 越 粗 ， 相 反 就 表示 越 细 。 

【示例 】 新 建 testhtml 文档 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 分 别 定义 段落 文本 、 一 
| 级 标题 、<div> 标 签 包含 字体 的 粗细 效果 ， 同 时 定义 一 个 粗 体 样式 类 。 


Pp { font-weight: normal } /# 等 于 400*/ 

hl { font-weight: 700 } 诊 等 于 bold*/ 
div{ font-weight: bolder } /# 可 能 为 500 */ 
.bold {font-weight:bold:} 人 # 粗 体 样式 类 */ 
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人 注意 : 设置 字体 粗细 也 可 以 种 为 定义 字体 的 重量 。 对 于 中 文 网 页 设计 来 说 一 般 仅 用 到 bold (加 | 
粗 ) 、normal (普通 ) 两 个 属性 值 。 | 


10.1.5 ”定义 艺术 字体 


使 用 CSS3 的 font-style 属性 可 以 定义 字体 倾斜 效果 ， 用 法 如 下 。 
font-style: normal | italic | oblique | 
其 中 ，normal 为 默认 值 ， 表 示 正 常 的 字体 ，italic 表示 斜体 ，oblique 表示 倾斜 的 字体 。italic 和 oblique 
两 个 取 值 只 能 在 英文 等 西方 文字 中 有 效 。 | 
【示例 】 新 建 test.html 文档 ， 输 入 下 面 样式 ， 定 义 一 个 斜体 样式 类 。 
italic { 上 # 斜体 样式 类 */ 
font-style: italic; 
} 
在 <body> 标 签 中 输入 两 段 文本 ， 并 把 斜体 样式 类 应 用 到 其 中 一 段 文本 中 。 
<p> 知 我 者 ， 谓 我 心 忧 ， 不 知 我 者 ， 谓 我 何 求 。</p> 
<p class="italice"> 君 子 坦荡 荡 ， 小 人 长 戚 威 。</p> 


最 后 在 浏览 器 中 预览 ， 比 较 效果 如 图 10.2 所 示 。 
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知 我 者 ， 谓 我 心 忧 ， 不 知 我 者 ， 谓 我 何 求 。 
避 子 妇 游 游 ， 兴 人 灰 怖 成 。 


图 102 ”比较 正常 字体 和 斜体 效果 
10.1.6 ”定义 修饰 线 


使 用 CSS3 的 text-decoration 属性 可 以 定义 字体 修饰 线 效果 ， 用 法 如 下 。 
text-decoration : none || underline || blink || overline || line-through 


其 中 ,normal 为 默认 值 ， 表示 无 装饰 线 ; blink 表示 闪烁 效果 underline 表示 下 画 线 效果 ; ea 
表示 贯穿 线 效果 ，overline 表示 上 画 线 效果 。 

【操作 步骤 】 

(1) 新 建 testhtml 文档 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 

(2) 输入 下 面 样式 ， 定 义 3 个 装饰 字体 样式 类 。 


.underline {text-decoration: underline;} /# 下 画 线 样式 类 */ 
.Overline {text-decoration: overline:} 上 上 夯 线 样式 类 */ 
.line-through {text-decoration: line-through:} 上 # 删除 线 样式 类 */ 


(3) 在 <body> 标 签 中 输入 3 行 段落 文本 ， 并 分 别 应 用 上 面 的 装饰 类 样式 。 
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<p class="underline"> 昨 夜 西风 凋 碧 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 </p> 
<p class="ovetline"> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 </p> 
<p class="line-through"> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 </p> 


会 内 (4) 再 定义 一 个 样式 ， 在 该 样式 中 ， 同 时 声明 多 个 装饰 值 ， 定 义 的 样式 如 下 。 
~ 
(5) 在 正文 中 输入 一 行 段落 文本 ， 并 把 这 个 line 样式 类 应 该 到 该 行文 本 中 。 


<p class="line"> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 。</p> 
(6) 在 浏览 器 中 预览 ， 多 种 修饰 线 比 较 效果 如 图 10.3 所 示 。 
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图 10.3 多 种 下 画 线 的 应 用 效果 


安 提示 : CSS3 增强 text-decoration 功能 ， 新 增 如 下 5 个 子 属性 。 
| textrdecoration-line: 设置 装饰 线 的 位 置 ， 取 值 包括 none (无 ) 、underline、overline、 
ein, li 
text-decoration-color: 设置 装饰 线 的 颜色 。 
text-decoration-style: 设置 装饰 线 的 形状 ， 取 值 包括 solid、double、dotted、dashed、 
wavy (波浪 线 ) 。 
text-decoration-skip: 设置 文本 装饰 线条 必须 略 过 内 容 中 的 哪些 部 分 。 
text-underline-position: 设置 对 象 中 的 下 画 线 的 位 置 。 
| 关于 这 些 子 属性 的 详细 取 值 说 明和 用 法 ， 请 参考 CSS3 参考 手册 。 由 于 目前 大 部 分 浏览 器 暂 不 支 
持 这 些 子 属性 ， 可 以 暂时 忽略 。 


“10.1.7 ”定义 字体 的 变 体 
可 几 训 使 用 CSS3 的 fontvariant 属性 可 以 定义 字体 的 变 体 效果 ， 用 法 如 下 。 


font-variant: normal | small-caps 


其 中 ，normal 为 默认 值 ， 表 示 正 常 的 字体 ; small-caps 表示 小 型 的 大 写字 母 字体 。 
【示例 】 新 建 testhtml 文档 ， 在 内 部 样式 表 中 定义 一 个 类 样式 。 


.small-caps { 府 小 型 大 写字 母 样式 类 所 
font-variant:small-caps:} 


然后 在 <body> 标 签 中 输入 一 行 段 落 文本 ， 并 应 用 上 面 定 义 的 类 样式 。 
<p class="small-caps">font-variant </p> 
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人 
人 注意 ;font-variant 仅 支 持 拉丁 字体 ， 中 文字 体 没 有 大 小 写 效果 区 分 。 如 果 设置 了 小 型 大 写字 体 ， | 


但 是 该 字体 没有 找到 原始 小 型 大 写字 体 ， 则 浏览 器 会 模拟 一 个 。 例如， 可 通过 使 用 一 个 常 | 
规 字体 ， 并 将 其 小 写字 母 替换 为 缩小 过 的 大 写字 母 。 


10.1.8 定义 大 小 字体 


使 用 CSS3 的 text-transform 属性 可 以 定义 字体 大 小 写 效果 ， 用 法 如 下 。 
text-transform : none | capitalize | uppercase | lowercase 
其 中 ，none 为 默认 值 ， 表 示 无 转换 发 生 ，capitalize 表示 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 


其 余 无 转换 发 生 ; uppercase 表示 把 所 有 字母 都 转换 成 大 写 ; lowercase 表示 把 所 有 字母 都 转换 成 小 写 。 | 
【示例 】 新 建 test.html 文档 ， 在 内 部 样式 表 中 定义 3 个 类 样式 。 | 


.capitalize {text-transform: capitalize:} 族 首 字母 大 小 样式 类 */ 
.uppercase {text-transform: uppercase;} /# 大 写 样式 类 */ 
.lowercase {text-transform: lowercase;} 谍 小 写 样式 类 */ 


然后 在 <body> 标 签 中 输入 3 行 段落 文本 ， 并 分 别 应 用 上 面 定义 的 类 样式 。 


<p class="capitalize">text-transform:capitalize;</p> 
<p class="uppercase">text-transform:uppercase;</p> 
<p class="lowercase">text-transform:lowercase:</p> 


分 别 在 下 和 Firefox 浏览 器 中 预览 ， 则 比较 效果 如 图 10.4 和 图 10.5 所 示 。 


© 5 ET Cre test 


@ localhostmysite/iestlhtml 
Text-Transform:capitalize; 


TEXT-TRANSFORMEUPPERCASE; Text-transform:capitalize; 


TEXT-TRANSFORM:UPPERCASE; 
text-transform:lowercase; 


text-transform:lowercase; 


图 104 正 浏 览 器 中 解析 的 大 小 效果 图 10.5 Firefox 浏览 器 中 解析 的 大 小 效果 


比较 发 现 : 下 浏览 器 认为 只 要 是 单词 就 把 首 字母 转换 为 大 写 ， 而 Firefox 浏览 器 认为 只 有 单词 通 
过 空格 间隔 之 后 ， 才 能 够 成 为 独立 意义 上 的 单词 ， 所 以 几 个 单词 连 在 一 起 时 就 算 作 一 个 词 。 | 


10.2 设计 文本 样式 


文本 样式 主要 设计 正文 的 排版 效果 ， 属 性 名 以 text 为 前 组 进行 命名 ， 下 面 分 别 进行 介绍 。 


10.2.1 定义 文本 对 齐 
使 用 CSS3 的 text-align 属性 可 以 定义 文本 的 水 平 对 齐 方式 ， 用 法 如 下 。 


text-align: left | right | center | justify 


i 
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其 中 ，left 为 默认 值 ， 表 示 左 对 齐 ; right 为 右 对 齐 ; center 为 居中 对 齐 ; justify 为 两 端 对 齐 。 
【示例 】 新 建 testhtml 文档 ， 在 内 部 样式 表 中 定义 3 个 对 齐 类 样式 。 


/ef ftext-align: left;} 
食 六 | .center {text-align: center;} 
| Tight {text-align: right;} 
然后 在 <body> 标 签 中 输入 3 段 广 本， 并 分 别 应 用 这 3 个 类 样式 。 


<p align="left"> 昨 夜 西风 凋 脾 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 </p> 
<p class="eenter"> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 </p> 
<p class='right"> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 </p> 


在 浏览 器 中 预览 ， 比 较 效果 如 图 10.6 所 示 。 


CE S rapyhocalhostecso/mysite/testt.html 


昨夜 西风 调 碧 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 


衣 带 潮 宽 终 不 悔 ， 为 伊 消 得 人 恬 性 
众 里 寻 他 千百度 ， 奢 然 四 首 , 那 人 却 在 灯火 闹 珊 处 


| 图 10.6 比较 3 种 文本 对 齐 效果 
10.2.2 ”定义 垂直 对 齐 


使 用 CSS3 的 vertical-align 属性 可 以 定义 文本 垂直 对 齐 ， 用 法 如 下 。 
vertical-align: auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length 


取 值 简单 说 明 如 下 。 

auto 将 根据 layout-flow 属性 的 值 对 齐 对 象 内 容 。 

baseline 表示 默认 值 ， 表 示 将 支持 valign 特性 的 对 象 内 容 与 基线 对 齐 。 

sub 表示 垂直 对 齐 文本 的 下 标 。 

super 表示 垂直 对 齐 文本 的 上 标 。 

top 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 项 端 对 齐 。 

text-top 表示 将 支持 valign 特性 的 对 象 的 文本 与 对 象 项 端 对 齐 。 

middle 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 中 部 对 齐 。 

bottom 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 底 端 对 齐 。 

text-bottom 表示 将 支持 valign 特性 的 对 象 的 文本 与 对 象 顶端 对 齐 。 

length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 者 百分数 ， 可 为 负数 ， 定 义 由 基线 算 起 
的 偏 移 量 ， 基 线 对 于 数值 来 说 为 0， 对 于 百分数 来 说 就 是 0%。 

| 【示例 】 新 建 testl html 文档 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 一 个 内 部 样 
| 式 表 ， 然 后 输入 下 面 样式 ， 定 义 上 标 类 样式 。 


:super {vertical-align: super;} 
然后 在 <body> 标 签 中 输入 一 行 段落 文本 ， 并 应 用 该 上 标 类 样式 。 
<p>vertical-align 表示 垂直 <span class=" super "> 对 齐 </span> 属 性 </p> 
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在 浏览 器 中 预览 ， 则 显示 效果 如 图 10.7 所 示 。 


ls 
vertical-align 表 示 委 直 对 齐 属性 


图 10.7 文本 上 标 样式 效果 


10.2.3 ”定义 文本 间距 


使 用 CSS3 的 letter-spacing 属性 可 以 定义 字 距 ， 使 用 CSS3 的 word-spacing 属性 可 以 定义 词 距 。 
这 两 个 属性 的 取 值 都 是 长 度 值 ， 由 浮 点 数字 和 单位 标识 符 组 成 ， 默 认 值 为 normal， 表 示 默 认 间 隔 。 | 

定义 词 距 时 ， 以 空格 为 基准 进行 调节 ， 如 果 多 个 单词 被 连 在 一 起 ， 则 被 word-spacing 视 为 一 个 单 | 
词 ， 如 果 汉 字 被 空格 分 隔 ， 则 分 隔 的 多 个 汉字 就 被 视 为 不 同 的 单词 ，word-spacing 属性 此 时 有 效 。 | 

【示例 】 下 面 示例 演示 如 何 定义 字 距 和 词 距 样式 。 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <head> 标 | 
签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 两 个 类 样式 。 | 

.lspacing {letter-spacing: lem;} 访 字 距 样式 类 */ 

.wspacing {word-spacing:lem:} 履 词 距 样式 类 */ 

然后 在 <body> 标 签 中 输入 两 行 段落 文本 ， 并 应 用 上 面 两 个 类 样式 。 

<p class="lspacing">letter spacing word spacing ( 字 间 距 ) </p> 

<p class="wspacing">letter spacing word spacing ( 词 间距 ) </p> 

在 浏览 器 中 预览 ， 显 示 效 果 如 图 10.8 所 示 。 从 图 中 可 以 直观 地 看 到 ， 所 他 中 衣 是 定义 字 生 之 | 
间 的 间距 ， 而 词 距 就 是 定义 西 文 单词 的 距离 。 | 


CE B hr /socalhos/ yere nest htm 


人 二 和 二 这 [村 剖 计 要 时 word spacing ( 字 和 间距 ) 


letter spacing ”word spacing〔 词 间距 ) 


图 10.8” 字 距 和 词 距 演 示 效 果 比 较 | 
< 注意 : 字 距 和 词 距 一 般 很 少 使 用 ,使 用 时 应 慎重 考虑 用 户 的 阅读 体验 和 感受 。 对 于 中 文 用 户 来 说 ， 
letter-spacing 属性 有 效 ， 而 word-spacing 属性 无 效 。 
10.2.4 定义 行 高 
使 用 CSS3 的 line-height 属性 可 以 定义 行 高 ， 用 法 如 下 。 
line-height: normal | length 
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其 中 ，normal 表示 默认 值 ， 一 般 为 1.2em; length 表示 百分比 数字 ， 或 者 由 浮 点 数字 和 单位 标识 
| 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 
| 【示例 】 新 建 test.html 文档 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样 
全 站 | 式 表 ， 输 入 下 面 样式 ， 定 义 两 个 行 高 类 样式 。 
人 行 高 样式 类 1 


id 放行 高 为 一 个 字 大 小 *) 
| .p2 {/* 行 高 样式 类 2*/ 
line-height:2em; 放 行 高 为 两 个 字 大 小 */} 


然后 在 <body> 标 签 中 输入 两 行 段落 文本 ， 并 应 用 上 面 两 个 类 样式 。 


| <hl> 人 生 三 境界 <hl> 

| <h2> 出 自 王国 维 《 人 间 词 话 》</h2> 

| <p class="p1"> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 :" 昨 夜 西风 凋 碧 树 。 独 上 高 楼 ， 望 断 天 涯 路 。 
， "此 第 一 境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 暮 然 回首 ， 那 人 却 在 灯火 
| 阑珊 处 。" 此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 达 以 此 意 解 释 诸 词 ， 丽 为 曼 欧 诸 公所 不 许 也 。</p> 

| <p elass="p2"> 笔 者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 境界 ， 但 要 想 逾 越 它 却 不 是 那么 简单 。 成 功 人 士 果敢 
| 坚忍， 不 屈 不 挠 ， 造 就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 逾越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 自我 的 极限 。 成 功 
| 后 回 望 来 路 的 人 , 才 会 明白 另 解 这 三 重 境界 的 话 : 看 山 是 山 , 看 水 是 水 ; 看 山 不 是 山 , 看 水 不 是 水 ; 看 山 还 是 山 ， 
| 看 水 还 是 水 。</p> 


在 浏览 器 中 预览 ， 显 示 效 果 如 图 10.9 所 示 。 
四- ac|Butnz 
人 生 三 境界 
出 白 王国 维 《 人 间 词 话 》 


古今 之 成 大 事业 、 大 学 靖 痢 ， 必 经过 三 神 之 境 曾 ;" 昨 蕉 西风 油 饭 峙 。 独 上 两 楼， 开 好 天 汰 路 ，" 此 第 
一 填 也 ." 衣 带 浙 宽 终 不 悔 ， 为 人 消 得 人 民 修 ，" 此 第 一 境 也 。" 众 里 寻 他 千百度 ， 莫 然 目 首 ， 那 人 却 在 


但 类 国 部 处 "此 训 境 万， 此 等 滞 备 非 大 词 人 不 能 道 。 然 壹 以 比 总 逢 释 诺 词 ， 轩 为 曼 欧 庶 公 所 不 许 


物 者 认为 ， 凡 人 都 可 以 从 容 地 做 到 和 药 二 境界 ， 但 于 想 逾 超 它 却 不 是 那么 简单 。 成 功 人 士 果 数 坚忍 ,不 
屈 不 挠 ， 洛 就 了 他 们 不 同 于 凡人 的 成 功 ， 他 信 追 越 的 不 汉 仅 是 人 邱 的 并 界 ， 更 是 他 们 自我 的 极限 。 成 
功 后 回 望 来 路 的 人 ， 才 会 已 白 另 解 这 三 重 境 界 的 话 : 在 山 是 止 ， 看 水 是 水 ; 看 山 不 是 山 ， 看 水 不 是 
水 ; 看 小 还 是 小， 看 水 还 是 水 


图 10.9 段落 文本 的 行 高 演示 效果 
10.2.5 ”定义 首 行 缩 进 
使 用 CSS3 的 text-indent 属性 可 以 定义 文本 首 行 缩 进 ， 用 法 如 下 。 
text-indent: length 
其 中 ，length 表示 百分比 数字 ， 或 者 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 建 议 


| p {textindent2em:;} 访 首 行 缩 进 两 个 字 距 * 


. 194 . 
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然后 在 <body> 标 签 中 输入 如 下 标题 和 段落 文本 。 
<hl> 人 生 三 境界 <hl> | 
<h2> 出 自 王国 维 《 人 间 词 话 》</h2> | 
<p> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 :" 昨 夜 西风 凋 牧 树 。 独 上 高 楼 ， 望 断 天 涯 路 。" 此 第 一 
境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 悼 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 暮 然 回首 ， 那 人 却 在 灯火 一 形 处 。 | 
"此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 天 以 此 意 解释 诸 词 ， 丽 为 曼 欧 诸 公所 不 许 也 。</p> | 
<p> 笔 者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 三 境界， 但 要 想 逾越 它 却 不 是 那么 简单 。 成 功 人 士 果敢 坚忍 ， 不 届 不 国信 (X 
挠 , 造就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 请 越 的 不 仅仅 是 人 生 的 境界 ,更 是 他 们 自我 的 极限 。 成 功 后 回 望 来 路 的 人 ， ， 
才 会 明白 另 解 这 三 重 境界 的 话 :看 山 是 山 ， 看 水 是 水 ; 看 山 不 是 山 ， 看 水 不 是 水 ; 看 山 还 是 山 ， 看 水 还 是 水 。 <p> | 


在 浏览 器 中 预览 ， 则 可 以 看 到 文本 缩 进 效 果 ， 如 图 10.10 所 示 。 
【示例 2】 使 用 text-indent 属性 可 以 设计 悬垂 缩 进 效果 。 
新 建 一 个 网 页 ， 保 存 为 testl.html， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 
输入 下 面 样式 ， 定 义 段落 文本 首 行 缩 进 负 的 两 个 字符 ， 并 定义 左 侧 内 部 补 白 为 两 个 字符 。 
Pp {/* 悬垂 缩 进 两 个 字 距 村 
text-indent:-2em; /* 首 行 缩 进 */ 
padding-left:2em; 此 左 侧 补 白 */} 
text-indent 属性 可 以 取 负 值 , 定义 左 侧 补 白 , 防止 取 负 值 缩 进 导致 首 行文 本 伸 到 段落 的 边界 外 边 。 
然后 在 <body> 标 签 中 输入 如 下 标题 和 段落 文本 。 
<hl>《 人 间 词 话 》 节 选 <hl> 
<h2> 王 国 维 </h2> 
<p> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 :" 昨 夜 西风 凋 碧 树 。 独 上 高 楼 ， 望 断 天 涯 路 。" 此 第 一 


境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 翌 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 茵 然 回 首 ， 那 人 却 在 灯火 盖 丙 处 。 
"此 第 三 境 也 。 此 等 语 蕴 非 大 词 人 不 能 道 。 然 趟 以 此 意 解 释 诸 词 ， 恐 为 胺 欧 诸 公 所 不 许 也 。</p> 


在 浏览 器 中 预览 ， 则 可 以 看 到 文本 悬垂 缩 进 效果 ， 如 图 10.11 所 示 。 


© ET ES > 
人 生 三 境界 《人 间 词 话 》 节 选 


出 自 王国 维 《 人 间 词 话 》 王国 维 


古今 之 成 大 事业 、 六 人 es 独 二 过 省 ， re ty 独 上 高 
上 高 楼， A ， de 和 望 断 天 活 第 - " 衣 带 : 全 
性 . "此 第 二 境 也 众 里 寻 他 : 本 入 

2 tt. Te. 然 Le i A 处 。 。 此 等 下 能: 机 


笔者 认为 ， 凡人 者 可 以 从 宕 地 到 第 二 境界 ， 自 要 超越 它 不 是 那么 简 
坚忍， 人 这 就 


。 成 » 号 四 
是 ， 望 来 路 | 是 人 生 利和 和 
生生 加 看 水 是 水 ;看 山 寂 是 山 ， 看 水 不 是 术 ; 祷 明 自 呈 乍 人 三 i Rs 四 履 山 示 是 山 ， 震 水 四 
山 还 ; 是 水 看 山 还 是 山 ， 看 水 : 


图 10.10 首 行 缩 进 效 果 图 10.11 悬垂 缩 进 效果 
10.3 设计 图 像样 式 


在 CSS 没有 普及 前 ， 主 要 使 用 <img> 标 签 的 属性 来 控制 图 像样 式 ， 如 大 小 、 边 框 、 位 置 等 。 使 用 ， 
CSS 可 以 更 方便 地 控制 图 像 显 示 , 设计 各 种 特殊 效果 , 这 种 用 法 也 符合 W3C 标准 , 是 现在 推荐 的 用 法 。 L 
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中 10.3.1 定义 图 像 大 小 
各 img> 标 签 包含 width 和 height 属性 ， 使 用 它们 可 以 控制 图 像 的 大 小 。 不 过 CSS 提供 了 更 符合 标 
， 准 的 width 和 height 属性 ， 使 用 这 两 个 属性 可 以 更 灵活 地 设计 图 像 大 小 。 


【示例 1】 下 面 是 一 个 简单 地 使 用 CSS 控制 图 像 大 小 的 案例 。 
Note | 启动 Dreamweaver， 新 建 网 页 ， 保 存 为 testLhtml， 在 <body> 标 签 内 输入 以 下 代码 。 


| <img class="w200" src="images/1.jpg" > 
<img class="w200" src="images/2.jpg" > 
<img class="w200" src="images/3.jpg" > 
<img src="images/4.jpg" /> 


| 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 以 
| 类 样式 的 方式 控制 网 页 中 图 像 的 显示 大 小 。 
-w200 { /* 定义 控制 图 像 高 度 的 类 样式 */ 


| height:200px; 
| } 
显示 效果 如 图 10.12 所 示 ， 可 以 看 到 使 用 CSS 更 方便 控制 图 像 大 小 ， 提 升 了 网 页 设计 的 灵活 性 。 


当 图 像 大 小 取 值 为 百分比 时 ， 浏 览 器 将 根据 图 像 包 含 框 的 宽 和 高 进行 计算 。 
| 【示例 2】 在 下 面 这 个 示例 中 ,统一 定义 图 像 大 小 缩小 50%， 然 后 分 别 放 在 网 页 中 和 一 个 固定 大 
| 小 的 盒子 中 ， 则 显示 效果 截然 不 同 ， 比 较 效 果 如 图 10.13 所 示 。 


| <style type="text/css"> 

di {/* 定义 固定 大 小 的 包含 框 % 

| height: 200px; /# 固定 高 度 */ 

| width: 509%; 庆 设计 弹性 宽度 所 

| border: solid 1px red; 旋 定义 一 个 边框 *#/} 

img {/* 定义 图 像 大 小 */ 

| width: 50%; 谍 百分比 宽度 */ 
height: 50%; 此 百分比 高 度 */} 

</style> 


<div> <img src="images/4.png" /> </div> 
<img src="images/4.png" /> 


图 10.12 固定 缩放 图 像 图 10.13 百分比 缩放 图 像 
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站 提示 : 当 为 图 像 仅 定义 宽度 或 高 度 ， 则 浏览 器 能 够 自动 调整 纵横 比 ， 使 宽 和 高 能 够 协调 缩放 ,， 扣 | 
免 图 像 变形 。 但 是 一 旦 同时 为 图 像 定义 宽 和 高 ， 就 妥 注 意 宽 高 比 ， 否 则 会 失真 。 


10.3.2 ”定义 图 像 边 框 贸 
图 像 在 默认 状态 是 不 会 显示 边框 ， 但 在 为 图 像 定义 超 链接 时 会 自动 显示 2 像素 一 3 像素 的 色 | vote 
粗 边框 。 使 用 border 属性 可 以 清除 这 个 边框 ， 代 码 如 下 所 示 。 | on 
<a href="#"><img src="images/login.gif" alt=" 登 录 " border="0" /></a> | 
不 推荐 上 述 用 法 ， 建 议 使 用 CSS 的 border 属性 定义 。CSS 的 border 属性 不 仅 可 以 为 图 像 定义 边 | 叶 
框 ， 且 提供 了 丰富 的 边框 样式 ， 支 持 定义 边框 的 粗细 、 颜 色 和 样式 。 上 
【示例 1】 针 对 上 面 的 清除 图 像 边框 效果 ， 则 使 用 CSS 定义 则 代码 如 下 。 | 
img {/* 清除 图 像 边框 *#/ 


border:none; 


使 用 CSS 为 <img> 标 签 定义 无 边框 显示 ,这样 就 不 再 需要 为 每 个 图 像 定义 0 边框 的 属性 。 Fi 
别 讲解 图 像 边框 的 样式 、 颜 色 和 粗细 的 详细 用 法 。 | 


.边框 样式 


CSS 为 了 元 素 边框 定义 了 众多 样式 ， 边 框 样式 可 以 使 用 border-style 属性 来 定义 。 wi 
两 种 ， 虚 线 框 和 实 线 框 。 
(1) 虚线 框 包括 dotted (点 ) 和 dashed (虚线 )。 
【示例 2】 在 下 面 示例 中 , 分 别 定义 两 个 不 同 的 点 线 和 虚线 类 样式 , 然后 分 别 应 用 到 两 幅 图 像 上 ， 
则 效果 如 图 10.14 所 示 ， 通 过 比较 可 以 看 到 点 线 和 虚线 的 细微 差异 。 
<style type="text/css"> 
img {width:250px; margin:12px;} /* 固定 图 像 显示 大 小 */ 
-dotted {让 点 线 框 样式 类 */ 
border-style:dotted;} 
.dashed { /* 虚线 框 样式 类 */ 
border-style: dashed; 
} 
</style> 
<img class="dotted" src="images/1.png" alt=" 点 线 边 框 " /> 
<img class="dashed" src="images/1.png" alt=" 虚 线 边 框 " /> 
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图 10.14 正 浏 览 器 中 的 点 线 和 虚线 比较 效果 
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(2) 实 线 框 包括 实 线 框 〈solid)、 双 线 框 double)、 立 体 上 四 槽 〈groove)、 立 体 凸 槽 (ridge)、 立 
| 性 四边 (inset)、 立 体 凸 边 〈outset)。 其 中 ， 实 线 框 〈solid) 是 应 用 最 广 的 一 种 边框 样式 。 


窟 提示 : 双 线 框 由 两 条 单线 和 中 间 的 空隙 组 成 ， 三 者 宽度 之 和 等 于 边框 的 宽度 .但 是 双 线 框 的 值 分 


人 配 也 会 存在 一 些 矛 盾 ， 无 法 做 到 平均 分 配 。 如 果 边 框 宽度 为 3 像素 ， 则 两 条 单线 与 其 间 空 

i 隙 分 别 为 1 像素 ; 如 果 边框 宽度 为 4 像素 , 则 外 侧 单 线 为 2 像素， 内 侧 和 中 间 空 际 分 别 为 

Note | 1 像素 ; 如 果 边 框 宽度 为 5 像素 ， 则 两 条 单线 宽度 为 2 像素 ， 中 间 空 孙 为 1 像素。 其 他 取 
值 依 此 类 推 。 


| 2 边框 颜色 和 宽度 

| 使 用 CSS 的 border-color 属性 可 以 定义 边框 的 颜色 ; 使 用 border-width 可 以 定义 边框 的 粗细 。 当 
元素 的 边框 样式 为 none 时 ， 所 定义 的 边框 颜色 和 边框 宽度 都 会 同时 无 效 。 在 默认 状态 下 ， 元 素 的 边 
| 框 样式 为 none， 而 元 素 的 边框 宽度 默认 为 2 像素 -3 像素 。 

| 【示例 3】 在 下 面 示例 中 快速 定义 图 像 各 边 的 边框 ， 显 示 效 果 如 图 10.15 所 示 。 


<style type="text/css"> 

img {/* 图 像 的 边框 样式 */ 
width:100px; 庆 宽度 *#/ 
border:solid red 150px; /* 统一 定义 各 边 样式 : 实 线 框 、 红 色 、150 像素 宽度 */ 
border-color:red blue green yellow; /* 顶 边 红 色 、 右 边 蓝 色 、 底 边 绿 色 、 左 边 黄色 */ 


} 
</style> 
<img src="images/1.png" /> 


【示例 4】 也 可 以 配合 使 用 不 同 复合 属性 自 定义 各 边 样式 ， 例 如 ， 下 面 示例 分 别 用 border-style、 
| bordercolor 和 border-width 属性 自 定义 图 像 各 边 边框 样式 ， 效 果 如 图 10.16 所 示 。 


<style type="text/css"> 

img {/* 图 像 的 边框 样式 */ 
width:300px; /* 宽度 *#/ 
border-style:solid dashed dotted double; /* 项 边 实 线 、 右 边 虚 线 、 底 边 点 线 、 左 边 双 线 */ 
border-width:10px 20px 30px 40px; /* 顶 边 10 像素 、 右 边 20 像素 、 底 边 30 像素 、 左 边 40 像素 */ 
border-color:red blue green yellow; /* 顶 边 红 色 、 右 边 蓝 色 、 底 边 绿 色 、 左 边 黄色 */ 

} 

</style> 

<img src="images/1.png" /> 


图 10.15 定义 各 边 边框 的 样式 效果 图 10.16 自 定 义 各 边 边框 的 样式 效果 
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如 果 各 边 样式 相同 ,使 用 border 会 更 方便 设计 。 例 如， 在 下 面 示例 中 ， 定义 各 边 样 式 为 红色 实 线 
框 ， 宽 度 为 20px， 则 代码 如 下 所 示 。 | 


div{ | 
width:400px: 应 宽度 *#/ | D 
height:200px; 片 高 度 所 | 鲜 

: border:solid 20px red: 上 # 边框 样式 *#/ | Note 


在 上 面 代码 中 ，border 属性 中 的 3 个 值 分 别 表示 边框 样式 、 边 框 颜色 和 边框 宽度 ， 它 们 没有 先后 
顺序 ， 可 以 任意 调整 顺序 。 | 


10.3.3 ”定义 不 透明 度 


在 CSS3 中 ， 使 用 opacity 可 以 设计 图 像 的 不 透明 度 ， 该 属性 的 基本 用 法 如 下 。 
opacity:0~1; 
取 值 范围 为 0~1， 数 值 越 低 透明 度 也 就 越 高 ，0 为 完全 透明 ， 而 1 表示 完全 不 透明 。 
内 提示 : 早期 卫 浏 览 器 使 用 CSS 滤 镜 定义 透明 度 ， 基 本 用 法 如 下 。 
filter:alpha(opacity=0~100); 
取 值 范围 为 0~100， 数 值 越 低 透 明度 也 就 越 高 ，0 为 完全 透明 ，100 表示 完全 不 透明 。 


【示例 】 在 下 面 这 个 示例 中 ， 先 定义 一 个 透明 样式 类 ， 然 后 把 它 应 用 到 一 个 图 像 中 ， 并 与 原 图 进 
行 比 较 ， 演 示 效 果 如 图 10.17 所 示 。 | 
<style type="text/css"> 
img { width: 300px;} 
-opacity {/* 透明 度 样式 类 */ 


opacity: 0.3; # 标准 用 法 *#/ 
filter:alpha(opacity=30); 庆 兼容 正 早期 版 本 浏览 器 */ 
-moz-opacity:0.3; /# 兼容 Firefox 浏览 器 #/ 

} 

</style> 


<img src="images/1.png" title=" 图 像 不 透明 度 " /> 
<img class="opacity" src="images/1.png" title=" 图 像 透 明度 为 0.3" /> 


图 10.17 图 像 透 明度 演示 效果 
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: | 10.3.4 ”定义 圆 角 特效 


CSS3 新 增 了 border-radius 属性 ， 使 用 它 可 以 设计 圆 角 样 式 ， 该 属性 用 法 如 下 。 
border-radius:none | <length>{1,4} [/ <length>{1,4} J?; 


border-radius 属性 初始 值 为 none, 适用 于 所 有 元 素 , 除了 border-collapse 属性 值 为 collapse 的 table 
| 元 素 。 取 值 简单 说 明 如 下 。 

回 ”none: 默认 值 ， 表 示 元 素 没有 圆 角 。 

”四 <length>:， 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 

| 为 了 方便 定义 元 素 的 4 个 顶 角 圆 角 ，borderradius 属性 派生 了 4 个 子 属性 。 

回 ”border-top-right-radius: 定义 右上 角 的 圆 角 。 

回 ”border-bottom-rightradius: 定义 右 下 角 的 圆 角 。 

回 “border-bottom-left-radius: 定义 左下 角 的 圆 角 。 

回 “border-top-left-radius: 定义 左上 角 的 圆 角 。 


窟 提示 :borderradius 属性 可 包含 两 个 参数 值 : 第 一 个 值 表示 贺 角 的 水 平 半径 ; 第 二 个 值 表示 回 角 
的 垂直 半径 ; 两 个 参数 值 通过 儿 线 分 隔 。 如 果 仅 包含 一 个 参数 值 ， 则 第 二 个 值 与 第 一 个 值 
相同 ， 它 表示 这 个 角 就 是 一 个 四 分 之 一 国 角 。 如 果 参 数值 包含 0， 则 就 是 矩形 ， 不 会 显示 
为 加 角 。 


【示例 】 下 面 示例 分 别 设计 两 个 圆 角 类 样式 ， 第 一 个 类 rl 为 固定 12 像素 的 圆 角 ; 第 二 个 类 12 
为 弹性 取 值 50% 的 椭圆 圆 角 ， 然 后 分 别 应 用 到 不 同 的 图 像 上 ， 则 演示 效果 如 图 10.18 所 示 。 


<style type="text/css"> 

img {width:300px:; border:solid 1px #eee;} 
I1 {border-radius: 12px:} 

12 {border-radius: 50%;} 

</style> 

<img class="r1" src="images/1.png" title=" 圆 
<img class="r2" src="images/1.png" title=" 李 sh £4 


图 10.18 圆 角 图 像 演示 效果 
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10.3.5 ”定义 阴影 特效 


CSS3 新 增 了 box-shadow 属性 ， 该 属性 可 以 定义 阴影 效果 ， 该 属性 用 法 如 下 所 示 。 
box-shadow:none | <shadow> [ , <shadow> ]*; 


box-shadow 属性 的 初始 值 是 none， 该 属性 适用 于 所 有 元 素 ， 取 值 简单 说 明 。 

回 ”none: 默认 值 ， 表 示 元 素 没有 阴影 。 

加 ”<shadow>: 该 属性 值 可 以 使 用 公式 表示 为 inset && [ <length>{2,4} && <color>?]， 其 中 ，inset | 
表示 设置 阴影 的 类 型 为 内 阴影 ， 默 认为 外 阴影 ，<length> 是 由 浮 点 数字 和 单位 标识 符 组 成 的 | 

长 度 值 ， 可 取 正 负 值 ， 用 来 定义 阴影 水 平 偏 移 、 垂 直 偏 移 ， 以 及 阴影 大 小 〈 即 阴影 模糊 度 ) 、 | 

阴影 扩展 ， <color> 表 示 阴 影 颜 色 。 | 


深 提示 : 如 果 不 设置 阴影 类 型 时 ， 默 认为 投影 效果 ， 当 设置 为 inset 时 ， 则 阴影 效果 为 内 阴影 X | 
轴 偏 移 和 Y 轴 偏 移 定义 阴影 的 偏 移 距 离 。 阴影 大 小 、 阴 影 扩 展 和 阴影 颜色 是 可 选 值 ， 默 | 
认为 黑色 实 影 。box-shadow 属性 值 必须 设置 阴影 的 偏 移 值 ， 否 则 没有 效果 。 如 果 需 要 定 

义 阴影 ， 不 需要 偏 移 ， 此 时 可 以 定义 阴影 偏 移 为 0， 这 样 才 可 以 看 到 阴影 效果 。 
【示例 1】 在 下 面 这 个 示例 中 ， 设 计 一 个 阴影 类 样式 ， 定 义 圆 角 、 阴 影 显示 ， 设 置 圆 朋 大 小 为 8 
像素 ， 阴 影 显示 在 右 下 角 ， 模 糊 半 径 为 14 像素 ， 然 后 分 别 应 用 第 二 幅 图 像 上 ， 演 示 如 图 10.19 所 示 。 


<style type="text/css"> 
img { width: 300px: margin: 6px;} 


A 
border-radius: 8px: 
-moz-box-shadow: 8px 8px 14px #06C; /#* 兼容 Gecko 引擎 */ 
-webkit-box-shadow: 8px 8px 14px #06C; /# 兼容 Webkit 引擎 */ 
box-shadow: 8px 8px 14px #06C; 此 标准 用 法 */ 

} 

</style> 


<img src="images/1.png" title=" 无 阴影 图 像 " /> 
<img class="r1" src="images/1.png" title=" 阴 影 图 像 " /> 


图 10.19 阴影 图 像 演示 效果 
【示例 2】box-shadow 属性 用 法 比较 灵活 ， 可 以 设计 车 加 阴影 特效 。 例 如 ， 在 上 面 示例 1 中 ， 修 | 
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| 改 类 样式 rl 的 代码 如 下 ， 通 过 多 组 参数 值 定义 渐变 阴影 效果 如 图 10.20 所 示 。 
| img { width: 300px; margin: 6px;} 
| -LT{ 
| border-radius: 12px; 
= 天 | box-shadow: -10px 0 12px red, 


| 10px 0 12px blue, 
Note 0 -10px 12px yellow, 
0 10px 12px green; 
} 
一 -oN 
ols mpyflocalhoste0s0/myste /te noml ~ | Blocalhost | 大江 


_ J 
图 10.20 设计 图 像 多 层 阴 影 效果 


” 次 提示 ， 当 设计 多 个 阴影 时 ， 需 要 注意 书写 顺序 ， 最 先 写 的 于 影 将 显示 在 最 顶层 。 如 上 面 示例 2 
| 这 段 代码 中 ， 先 定义 一 个 10px 的 红色 阴影 ， 再 定义 一 个 10px 大 小 、10px 扩展 的 阴影 。 


显示 结果 就 是 红色 阴影 层 履 盖 在 黄色 阴影 层 之 上 ,此 时 如 果 项 层 的 阴影 太 大 ， 就 会 遮盖 底 
部 的 阴影 。 


10.4 案例 实战 


| CSS3 优化 和 增强 了 CSS 2.1 的 字体 和 文本 属性 ， 使 网 页 文字 更 具 表 现 力 和 感染 力 ， 丰 富 了 网 页 
文本 的 样式 和 版 式 。 


10.4.1 设计 文本 阴影 


在 CSS3 中 ， 可 以 使 用 text-shadow 属性 为 文字 添加 阴影 效果 ， 用 法 如 下 所 示 。 
text-shadow: none | <shadow> [, <shadow> ]* 
<shadow> = <length>{2,3} && <color>? 


text-shadow 属性 的 初始 值 为 无 ， 适 用 于 所 有 元 素 ， 取 值 简单 说 明 如 下 。 

回 none: 无 阴影 。 

| 回 <length>@D: 第 一 个 长 度 值 用 来 设置 对 象 的 阴影 水 平 偏 移 值 ， 可 以 为 负 值 。 
<length>@: 第 二 个 长 度 值 用 来 设置 对 象 的 阴影 垂直 偏 移 值 ， 可 以 为 负 值 。 
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<length>@): 如 果 提 供 了 第 三 个 长 度 值 则 用 来 设置 对 象 的 阴影 模糊 值 ， 不 允许 负 值 。 
<color>: 设置 对 象 的 阴影 的 颜色 。 
【示例 】 下 面 为 段落 文本 定义 一 个 简单 的 阴影 效果 ， 演 示 效 果 如 图 10.21 所 示 。 


<style type="text/css"> | 侠 f 
p{ | 而 
I Note 
font: bold 60px helvetica, arial, sans-serif | 

color: #999; 

text-shadow: 0.1em 0.1em #333;} 

</style> 

<p> 文 本 阴影 : text-shadow</p> 


Cle hep/ /ecahost/mysiteresthml PD- 


图 10.21 定义 文本 阴影 | 


| 
“text-shadow: 0.lem 0.1em #333;” 声 明了 右 下 角 文本 阴影 效果 ， 如 果 把 投影 设置 到 右上 角 ， 则 可 
以 这 样 声 明 ， 效 果 如 图 10.22 所 示 。 


Pp {text-shadow: -0.1em -0.1em #333:;} 
同 理 ， 如 果 设置 阴影 在 文本 的 左下 角 ， 则 可 以 设置 如 下 样式 ， 演 示 效 果 如 图 10.23 所 示 。 
p {text-shadow: -0.1em 0.1em #333;} 


€ ° TEE Cr 


文本 阴影 


| 

二 | 

€ 避 全 localhort | 
| 

| 


text-shadow 


图 10.22 定义 左上 角 阴影 图 10.23 定义 左下 角 阴 影 
也 可 以 增加 模糊 效果 的 阴影 效果 如 图 10.24 所 示 。 
pt text-shadow: 0.1em 0.1em 0.3em #333; } 
或 者 定义 如 下 模糊 阴影 效果 ， 效 果 如 图 10.25 所 示 。 
text-shadow: 0.1em 0.1em 0.2em black; 


text-shadow 属性 的 第 一 个 值 表 示 水 平 位 移 ; 第 二 个 值 表示 垂直 位 移 ， 正 值 偏 右 或 偏 下 ， 负 值 偏 左 
或 偏 上 ;第 三 个 值 表示 模糊 半径 ， 该 值 可 选 ， 第 四 个 值 表示 阴影 的 颜色 ， 该 值 可 选 。 | 


| 
人 
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图 10.24 定义 模糊 阴影 图 10.25 定义 模糊 阴影 


”在 阴影 偏 移 之 后 ， 可 以 指定 一 个 模糊 半径 。 模 糊 半径 是 个 长 度 值 ， 指 出 模糊 效果 的 范围 。 如 何 计 
， 算 模糊 效果 的 具体 算法 没有 指定 。 在 阴影 效果 的 长 度 值 之 前 或 之 后 还 可 以 选择 指定 一 个 颜色 值 。 如 果 
| 没有 指定 颜色 ， 那 么 将 使 用 color 属性 值 来 普 代 。 


| 10.4.2 设计 动态 内 容 


| content 属性 属于 内 容 生成 和 蔡 换 模块 ， 可 以 为 匹配 的 元 素 动态 生成 内 容 ， 这 样 就 能 够 满足 在 CSS 
| 样式 设计 中 临时 添加 非 结 构 性 的 样式 服务 标签 ， 或 者 添加 补充 说 明 性 内 容 等 。 

content 属性 的 简明 语法 如 下 所 示 。 

content: normal | string | attr() | url( | counter() | none: 

取 值 简单 说 明 如 下 。 

normal: 默认 值 。 表 现 与 none 值 相同 。 

string: 插入 文本 内 容 。 

attr0: 插入 元 素 的 属性 值 。 

ul0: 插入 一 个 外 部 资源 ， 如 图 像 、 音 频 、 视 频 或 浏览 器 支持 的 其 他 任何 资源 。 
counter0: 计数 器 ， 用 于 插入 排序 标识 。 

none: 无 任何 内 容 。 


示 : content 属性 早 在 CSS 2.1 中 就 被 引入 ， 可 以 使 用 :before 和 :after 伪 元 素 生 成 内 容 。 此 特性 
目前 已 被 大 部 分 的 浏览 器 支持 ， 另 外 Opera 9.5+ 和 Safari 4 已 经 支持 所 有 元 素 的 content 
属性 ， 而 不 仅仅 是 :before 和 :after 伪 元 素 。 


在 CSS3 Generated Content 工作 草案 中 ，content 属性 添加 了 更 多 的 特征 ， 例 如 ， 插 入 以 及 移 除 文 
档 内 容 的 能 力 ， 可 以 创建 脚注 、 结 语 和 段落 注释 。 但 是 目前 还 没有 浏览 器 支持 content 的 扩展 功能 。 
| 【示例 】 下 面 示例 使 用 content 属性 ， 配合 CSS 计数 器 设计 多 层 嵌 套 有 序列 表 序号 设计 ， 效 果 如 
| 10.26 所 示 。 


图 图 图 图 图 加 


了 医 


加 


<style type="text/css"> 

ol { list-style: none;} 人 # 清除 默认 的 序号 机 

li:before {color: #H00; font-family: Times New Roman:} 必 设计 层级 目录 序号 的 字体 样式 */ 
li{counter-increment:a 1:} 语 设计 递增 函数 a， 递 增 起 始 值 为 1 */ 
li:before {content:counter(a)". ";} 谍 把 递增 值 添 加 到 列表 项 前 面 */ 
lili{counter-increment:b 1:} 上 # 设计 递增 函数 b， 递 增 起 始 值 为 1 */ 
li li:before {content: counter(a)"."counter(b)". ":} 记 把 递增 值 添加 到 二 级 列表 项 前 面 */ 
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lilili{fcounter-increment: c 1:} 让 设计 递增 函数 c， 递 增 起 始 值 为 1 */ 
lilili:before{content: counter(a)"."counter(b)"."counter(c)". ";} /* 把 递增 值 添加 到 三 级 列表 项 前 面 */ 
</style> 
<o> 
<l 记 一 级 列表 项 目 1 
<o> 
<1> 二 级 列表 项 目 1</li> 
<1> 二 级 列表 项 目 2 JVote 
<ol> 


<1i> 三 级 列表 项 目 1</li> | 
<li> 三 级 列表 项 目 2</li> | 
</ol> 
</> 
</o> 


</l> 
<1i> 一 级 列表 项 目 2</li> | 
</ol> | 


和 ET Er 


1. 一 般 列表 项 目 1 
1.1. 二 级 列表 项 目 1 
1.2. 二 级 2 


图 10.26 使 用 CSS 技巧 设计 多 级 层级 目录 序号 
10.4.3 自 定义 字体 


CSS3 允许 用 户 通过 @font-face 规则 , 加 载 网 络 字体 文件 , 实现 自动 以 字体 类 型 的 功能 。@font-face 加 
规则 在 CSS3 规范 中 属于 字体 模块 。 | 视频 讲解 

@font-face 规则 的 语法 格式 如 下 。 | 

@font-face { <font-description> } | 


@font-face 规则 的 选择 符 是 固定 的 ， 用 来 引用 网 络 字体 文件 。<font-description> 是 一 个 属性 名 值 
格式 类 似 如 下 样式 。 | 
descriptor: value; 
descriptor: value; 
descriptor: value; 
descriptor: value; | 
El | 
descriptor: value; 

属性 及 其 取 值 说 明 如 下 。 

font-family: 设置 文本 的 字体 名 称 。 | 
font-style: 设置 文本 样式 。 
font-variant: 设置 文本 的 大 小 写 。 
font-weight: 设置 文本 的 粗细 。 | 


各 


图 图 图 加 
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回 “font-stretch: 设置 文本 是 否 横向 的 拉 伸 变形 。 

font-size: 设置 文本 字体 大 小 。 

src: 设置 自 定 义 字 体 的 相对 路 径 或 者 绝对 路 径 。 注意 , 该 属性 只 能 在 @font-face 规则 里 使 用 。 
【示例 】 下 面 示例 通过 @font-face 规则 引入 外 部 字体 文件 glyphicons-halflings-regulareot， 然 后 定 


义 几 个 字体 图 标 ， 嵌 入 在 导航 菜单 项 目 中 ， 效 果 如 图 10.27 所 示 。 


星 琶 录 和 Q 换 索 | @@ 计 加 


图 10.27 设计 包含 字体 图 标的 导航 菜单 
示例 主要 代码 如 下 所 示 。 


<style type="text/css"> 
谍 引入 外 部 字体 文件 */ 
@font-face { 
font-family: 'Glyphicons Halflings'; 谍 选择 默认 的 字体 类 型 */ 
局 外 部 字体 文件 列表 所 
src: Url(fonts/glyphicons-halflings-regulareot); 
src: Url(fonts/glyphicons-halflings-regulareot?#iefix) format(‘embedded-opentype'), 
url('fonts/glyphicons-halflings-regular.woff2'") format(‘woff2"), 
url('fonts/glyphicons-halflings-regular.woff ) format(‘woff), 
url(fonts/glyphicons-halflings-regularttf) format(‘truetype'), 
url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 


} 
上 # 定义 字体 图 标 样式 */ 


.glyphicon { 
position: relative; /# 相对 定位 */ 
top: 1px; /# 相对 向 上 偏 移 1 个 像素 */ 
display: inline-block: 上 # 行内 块 显示 */ 
font-family: 'Glyphicons Halflings'; 让 定义 字体 类 型 */ 
font-style: normal; /#* 字体 样式 */ 
font-weight: normal; /# 字体 粗细 */ 
line-height: 1: 证 定义 行 高 ， 清 除 文本 行 对 图 标的 影响 */ 
-webkit-font-smoothing: antialiased: /# 兼容 谷歌 浏览 器 解析 */ 
-moz-osx-font-smoothing: grayscale; 诊 兼容 Firefox 浏览 器 解析 */ 
8 


.glyphicon-home:before { content: "\e021"; } 
.glyphicon-user:before { content: "\e008"; } 
.glyphicon-search:before { content: "\e003"; } 
.glyphicon-plus:before { content "\e081"; } 
span {l* 定义 字体 图 标 标签 样式 */ 
font-size: 16px; 
color: red; 


} 
说 {l* 定义 导航 列表 框 样式 ， 清 除 默认 样式 所 


margin: 0; 
padding: 0; 
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list-style: none; 

} 

li {/* 定义 列表 项 目 样式 ， 水 平 并 列 显示 */ | 
float: left; | : 
padding: 6px 12px: | 侠 f 

人 全 一 

border: solid 1px hsla(359,93%,69%,0.6); 
border-radius: 6px: | JNote 

} | 

lia {/* 定义 超 链接 文本 样式 */ | 
font-size: 16px; | 
color: red; | 
text-decoration: none; | 

} | 

</style> | 

<u> | 


<li><span class="glyphicon glyphicon-home"></span> <a hre 人 ="#"> 主 页 </a></li> 

<li><span class="glyphicon glyphicon-user"></span> <a hre 人 ="#"> 登 录 </a></li> 

<li><span class="glyphicon glyphicon-search"></span> <a href="#"> 搜 索 </a></li> | 

<li><span class="glyphicon glyphicon-plus"></span> <a hre 伍 "#"> 添 加 </a></li> 
</ul> 


10.4.4 设计 正文 版 式 


中 文 版 式 与 西 文 版 式 存在 很 多 不 同 。 例 如 ， 中 文 段落 文本 缩 进 ， 而 西 文 悬垂 列表 ， 中 文 段落 一 般 | 
没有 段 距 ,而 西 文 习惯 设置 一 行 的 段 距 等 。 中 文 报刊 文章 习惯 以 块 的 适度 变化 来 营造 灵活 的 设计 版 式 ，， 
中 文 版 式 中 , 标题 习惯 居中 显示 , 正文 之 前 喜欢 设计 一 个 题 引 , 题 引 为 左右 缩 进 的 段落 文本 显示 效果 ，| 
正文 以 首 字 下 沉 效 果 显示 。 

本 案例 将 展示 一 个 简单 的 中 文 版 式 , 把 一 级 标题 、 二 级 标题 、 三 级 标题 和 眉 落 文本 的 样式 分 别 设 | 
计 ， 从 而 使 信息 的 轻重 分 明 ， 更 有 利于 用 户 阅读 ， 演 示 效果 如 图 10.28 所 示 。 


CE nee/ tocahaet mycits /edee hm 


CSS Zen Garden 


CS5 设 计 之 美 
展示 以 Cs 技术 为 基础 ， 并 提供 起 强 的 视 贡 牢 上 出力 。 双 要 这 泽 列表 中 性 意 一 个 样式 表 ， 就 可 以 将 它 加 刘 到 到 页 
面 ,并 呈现 不 同 的 八 计 效果 
下 载 EDL 文 栏 和 CSS 文件. 


启蒙 之 路 


同 议和 览 器 随意 定义 标签 ， 导 到 无 法 相互 钴 容 的 DOM 结 构 ， 或 者 提供 铁 达 标准 支持 的 CS33 等 陋习 随处 可 见 ， 如 今 当 使 太 这 些 不 
菲 容 隐 标签 和 栏 式 时 ， 设 计 之 路 会 _ 跨 才 王 < 


现在， 我 们 必 颇 清 际 以 新 为 了 莱 吝 不 同 浏览 器 而 中 有 的 一 些 坟 时 的 小 技巧 。 感 讲 WC、1A:+ 守 标准 扯 织 ， 以 及 浏览 加 厂 | 

家 和 开发 师 们 的 不 你 努力 ， 找 站 终于 能 够 直入 Wcb 设 计 的 标 }df。 | 
CSS Zen Garden (样式 表 漳 音 花 园 ) 沪 请 您 发 挥 自己 的 想象 力 ， 构 思 一 个 专业 级 的 网 页 。 让 我 们 用 大良 审议， 充满 理想 知 数 靖 | 
去 学 本 CSs 这 个 不 巧 的 技术 ， 晤 终 使 自己 悉 鲍 达到 技术 和 艺术 台 而 为 一 的 最 高 渍 界 。 


图 10.28 报刊 式 中 文 格式 效果 | 
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LI 
【操作 步骤 】 
(1) 设计 网 页 结构 。 本 示例 的 HTML 文档 结构 依然 采用 禅 意 花园 的 结构 ， 截 取 第 一 部 分 的 结构 
| 和 内 容 并 把 英文 全 部 译 为 中 文 。 


全 <div id="intro"> 
| <div id="pageHeader"> 
Note <hl><span>CSS Zen Garden</span></hl> 
| <h2><span><acronym title="cascading style sheets">CSS</acronym> 设 计 之 美 </span></h2> 
| </div> 


<div id="quickSummary"> 
<p class="p1"><span> 展 示 以 <acronym 
| title="cascading style sheets">CSS</acronym> 技 术 为 基础 , 并 提供 超 强 的 视觉 冲击 力 。 只 要 选择 列表 中 任意 一 
| 个 样式 表 ， 就 可 以 将 它 加 载 到 本 页 面 中 ， 并 呈现 不 同 的 设计 效果 。</span></p> 
| <p class="p2"><span> 下 载 <a title=" 这 个 页 面 的 HTML 源 代码 不 能 够 被 改动 。" 
href="http://www.csszengarden.com/zengarden-sample.html">HTML 文档 </a> 和 <a 
title=" 这 个 页 面 的 CSS 样式 表 文件 ， 你 可 以 更 改 它 。" 
| href="http://www.csszengarden.com/zengarden-sample.css">CSS 文件 </a>。</span></p> 
| </div> 
| <div id="preamble"> 
<h3><span> 启 蒙 之 路 </span></h3> 
<p class="pl"><span> 不 同 浏览 器 随意 定义 标签 ， 导 致 无 法 相互 兼容 的 <acronym 
title="document object model">DOM</acronym> 结 构 ， 或 者 提供 缺乏 标准 支持 的 <acronym 
| title="cascading style sheets">CSS</acronym> 等 陋习 随处 可 见 , 如 今 当 使 用 这 些 不 兼容 的 标签 和 样式 时 , 设计 
之 路 会 很 坎坷 。</span></p> 
| <p class="p2"><span> 现 在 ， 我 们 必须 清除 以 前 为 了 兼容 不 同 浏览 器 而 使 用 的 一 些 过 时 的 小 技巧 。 
感谢 <acronym 
title="world wide web consortium">W3C</acronym>、<acronym 
| title="web standards project">WASP</acronym> 等 标准 组 织 ， 以 及 浏览 器 厂家 和 开发 师 们 的 不 懈 努 力 , 我 们 终 
于 能 够 进入 Web 设计 的 标准 时 代 。</span></p> 
<p class="p3"><span>CSS Zen 
| Garden (样式 表 禅 意 花园 ) 邀请 你 发 挥 自 己 的 想象 力 ， 构 思 一 个 专业 级 的 网 页 。 让 我 们 用 慧眼 
， 来 审视 ， 充 满 理想 和 激情 去 学 习 CSS 这 个 不 朽 的 技术 ， 最 终 使 自己 能 够 达到 技术 和 艺术 合 而 为 一 的 最 高 境界 。 
</span></p> 
| </div> 
</div> 
| (2) 定义 网 页 基本 属性 。 定 义 背 景色 为 白色 ， 字 体 为 黑色 。 也 许 你 认为 浏览 器 默认 网 页 就 是 这 
| 个 样式 ， 但 是 考虑 到 部 分 浏览 器 会 以 灰色 背景 显示 ， 显 式 声明 这 些 基本 属性 会 更 加 安全 。 字 体 大 小 为 
”14px， 字 体 为 宋体 。 
| body {/* 页 面 基本 属性 */ 


| background: #ffE: WE fe 
| color: #000: 记 前 景色 *#/ 
| font-size: 0.875em: 庆 网 页 字体 大 小 */ 


| font-family: "新 宋体 ", Arial, Helvetica, sans-serif 上 # 网 页 字体 默认 类 型 */} 

| (3) 定义 标题 居中 显示 ， 适 当 调 整 标题 底 边 距 ， 统 一 为 一 个 字 距 。 间 距 设计 的 一 般 规律 字 距 
小 于 行距 ,行距 小 于 段 距 ， 段 距 小 于 块 距 。 检查 时 可 以 尝试 将 网 站 的 背景 图 案 和 线条 全 部 去 掉 ， 看 是 
和 否 还 能 保持 想 要 的 区 块 感 。 
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hl, h2, h3 {/* 标题 样式 */ 
text-align: center; 谍 居中 对 齐 */ | 
margin-bottom: lem:; 谍 定义 底 边界 */} | 

(4) 为 二 级 标题 定义 一 个 下 画 线 ， 并 调 暗 字体 颜色 ， 目 的 是 使 一 级 标题 、 二 级 标题 和 三 级 标题 | 全 内 

在 同一 个 中 轴线 显示 时 产生 一 个 变化 ， 避 免 单调 。 由 于 三 级 标题 字数 少 〈4 个 汉字 )， 可 以 通过 适当 | 窒 一 


调节 字 距 来 设计 一 种 平衡 感 ， 避 免 因为 字数 太 少 而 使 标题 看 起 来 很 单调 。 Note 
h2 {/* 个 性 化 二 级 标题 样式 */ | 
color: #999:; 谍 字体 颜色 */ | 
text-decoration: underline; 人 # 下 画 线 */} | 
h3 {* 个 性 化 三 级 标题 样式 */ | 
letter-spacing: 0.4em; /#* 字 距 所 | 
font-size: 1.4em; 让 字体 大 小 */} | 


(5) 定义 段落 文本 的 样式 。 统 一 清除 段落 间距 为 0， 定义 行 高 为 1.8 倍 字体 大 小 。 
Pp {/* 统一 段落 文本 样式 */ 
margin: 0; /# 清除 段 距 */ 
line-height 1.8em; /# 定义 行 高 */} 

(6) 定义 第 一 文本 块 中 的 第 一 段 文本 字体 为 深 灰 色 ， 定 义 第 一 文本 块 中 的 第 二 段 文本 右 对 齐 ， | 
定义 第 一 文本 块 中 的 第 一 段 和 第 二 段 文本 首 行 缩 进 两 个 字 距 ,同时 定义 第 二 文本 块 的 第 一 段 、 第 二 段 | 
和 第 三 段 文 本 首 行 缩 进 两 个 字 距 。 

#quickSummary .pl {/* 第 一 文本 块 的 第 一 段 样式 */ 


color: #444; /# 字体 颜色 */} 
#quickSummary .p2 {/* 第 一 文本 块 的 第 二 段 样式 */ 

text-align: right; 启 右 对 齐 */} 
#quickSummary .p1, .p2, .p3 {/* 除了 首 字 下 沉 段 以 外 的 段 样式 */ 

text-indent: 2em; 证 首 行 缩 进 *#/} 


(7) 为 第 一 个 文本 块 定义 左右 缩 进 样式 ， 设 计 引 题 的 效果 。 
#quickSummary {/* 第 一 文本 块 样式 */ 

margin-left: 4em; /# 左 缩 进 所 
margin-right: 4em; /# 右 缩 进 */} | 
(8) 定义 首 字 下 沉 效 果 。CSS 提供 了 一 个 首 字 下 沉 的 属性 : first-letter， 这 是 一 个 伪 对 象 。 什 么 | 
是 伪 、 伪 类 和 伪 对 象 ， 我 们 将 在 第 12 章 中 进行 详细 讲解 。 但 是 first-letter 属性 所 设计 的 首 字 下 沉 效 果 | 
存在 很 多 问题 ， 所 以 还 需要 进一步 设计 。 例 如 ， 设 置 段落 首 字 浮 动 显示 《〈 什 么 是 浮动 请 参阅 CSS 布 | 
局 章节 讲解 )， 同 时 定义 字体 大 小 很 大 ， 以 实现 下 沉 效果 。 为 了 使 首 字 下 沉 效果 更 明显 ， 这 里 设计 首 | 
字 加 粗 、 反 白 显示 。 | 
.first:first-letter {/* 首 字 下 沉 样式 类 */ 


font-size: SOpx; 人 # 字体 大 小 所 | 
fioatleft: /* 向 左 浮动 显示 */ | 
margin-right:6px; 上 # 增加 右 侧 边 距 */ | 
padding: 2px; 上 # 增加 首 字 四 周 的 补 白 */ | 
font-weight: bold: 谍 加 粗 字体 *#/ | 
line-height: lem; /* 定义 行距 为 一 个 字体 大 小 ， 避 免 行 高 影响 段落 版 式 */ | 
background: #000; 话 背景 色 *#/ | 
color HE /# 前 景色 *#/} | 
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< 注意 :由 于 下 早期 版 本 浏览 器 存在 bug， 无 法 通过 :first-letter 选择 器 来 定义 首 字 下 沉 效果 ， 故 这 
| 里 重新 定义 了 一 个 首 字 下 沉 的 样式 类 ( first) ， 然 后 手动 把 这 个 样式 类 加 入 到 HTML 文档 


| 结构 对 应 的 段落 中 。 
全 | <p class="pl first'><span> 不 同 浏览 器 随意 定义 标签 ， 导 致 无 法 相互 兼容 的 <acronym 
| title="document object model">DOM</acronym> 结 构 ， 或 者 提供 缺乏 标准 支持 的 <acronym 
title="cascading style sheets">CSS</acronym> 等 陋习 随处 可 见 ， 如 今 当 使 用 这 些 不 兼容 的 标签 和 样式 


时， 设计 之 路 会 很 坎坷 。</span></p> 


忘 提示 : 在 阅读 信息 时 ， 段 落 文本 的 呈现 效果 多 以 块 状 存在 。 如 果 说 单个 字 是 点 ， 一 行文 本 为 线 ， 
| 那么 段落 文本 就 成 面 了 ,而 面 以 方形 呈现 的 效率 最 高 , 网 站 的 视觉 设计 大 部 分 其 实 是 在 拼 
方块 。 在 页 面 版 式 设计 中 ， 建 议 坚持 如 下 设计 原则 。 
方块 感 越 强 ， 越 能 给 用 户 方向 感 。 
方块 越 少 ， 越 容易 阅读 。 
方块 之 间 以 空白 的 形式 进行 分 隔 ， 从 而 组 合 为 一 个 更 大 的 方块 。 


10.5 在 线 练 习 


使 用 CSS 设计 各 种 文本 效果 ， 以 及 各 种 网 页 版 式 和 文本 特效 ， 感 兴趣 的 同学 们 扫 码 强化 练习 。 
it 


Ds 


使 用 CSS3 背景 图 像 和 渐变 背景 


在 前 面 章节 中 ， 我 们 介绍 了 如 何在 网 页 中 插入 图 像 ， 但 是 在 网 页 设计 中 ， 用 户 更 喜欢 使 
用 CSS3 的 background 属性 来 显示 网 页 图 像 ， 这 样 可 以 避免 破坏 HTML 文档 结构 ， 美 化 网 
页 更 灵活 。 如 果 利 用 CSS3 渐变 技 术 还 可 以 设计 各 种 背景 图 案 ， 这 样 能 够 降低 网 页 设计 的 


难度 。 


【 学 习 重 点 】 

WI 正确 使 用 CSS 设计 背景 图 像 

灵活 使 用 多 重 背 景 图 像 设 计 网 页 版 面 
正确 使 用 线性 渐变 和 径 向 渐变 
熟练 使 用 渐变 函数 设计 背景 图 案 


至 吾 吾 


[网 区 设 计 与 网 站 建设 从 入 门 到 精通 ( 币 课 精 编 县 ) 


11.1 设计 背景 图 像 


下 面 来 介绍 如 何 使 用 CSS 设计 背景 图 像 的 显示 样式 。 
11.1.1 设置 背景 图 像 
在 CSS 中 可 以 使 用 background-image 属性 来 定义 背景 图 像 ， 具 体 用 法 如 下 。 


background-image: none | <url> 
默认 值 为 none， 表 示 无 背景 图 ， <url> 表 示 使 用 绝对 或 相对 地 址 指定 背景 图 像 。 


， 浴 提示 : GIF 格式 图 像 可 以 设计 动画 、 透 明 背景 ， 具 有 图 像 小 巧 等 优点 ;JPG 格式 图 像 具 有 更 丰富 
| 的 颜色 数 ， 图 像 品质 相对 要 好 ; PNG 类 型 综合 了 GIF 和 JPG 两 种 图 像 的 优点 。 


| 【示例 】 如 果 背 景 包含 透明 区 域 的 GIF 或 PNG 格式 图 像 ， 则 被 设置 为 背景 图 像 时 ， 这 些 透明 区 
| 域 依 然 被 保留 。 在 下 面 这 个 示例 中 , 先 为 网 页 定义 背景 图 像 ， 然 后 再 为 段落 文本 定义 透明 的 GIF 背景 
| 图像， 则 显示 效果 如 图 11.1 所 示 。 


<style type="text/css"> 

html, body, p{ height:100%;} 

body {background-image:url(images/bg.jpg);} 
Pp { background-image:url(images/ren png):} 


</style> 


和 
六 太太 


大 太太 
才 


人 


AAA 和 
图 11.1 透明 背景 图 像 的 显示 效果 


11.1.2 ”设置 显示 方式 
CSS 使 用 background-repeat 属性 控制 背景 图 像 的 显示 方式 ， 具 体 用 法 如 下 所 示 。 


background-repeat: repeat-x |repeat-y | [repeat | space | round | no-repeat]{1,2} 
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取 值 说 明 如 下 。 
repeat-x: 背景 图 像 在 横向 上 平 铺 。 


图 图 


repeat-y: 背景 图 像 在 纵向 上 平 铺 。 
repeat: 背景 图 像 在 横向 和 纵向 平 铺 。 
no-repeat: 背景 图 像 不 平 铺 。 | 
round: 背景 图 像 自 动 缩放 直到 适应 且 填 充满 整个 容器 ， 仅 CSS3 支持 。 Note 
space: 再 各 图像 以 相间 的 加 让 和 久光 刘 消 牙 从 三 切 基 个 放风 仅 CSS3 支持 。 | 
【示例 】 下 面 示 例 设计 一 个 公司 公告 栏 ， 其 中 宽度 是 固定 的 , 但 是 其 高 度 可 能 会 根据 正文 内 容 进 
行动 态 调整 ， Me 不 妨 利用 垂直 平 铺 来 进行 设计 。 
(1) 把 “公司 公告 ”栏目 分 隔 为 上 、 中 、 小 三 块 ， 设 计 上 和 下 为 固定 宽度 ， 而 中 国志 为 可 以 用 
时 调整 高 度 ， 设 计 的 结构 如 下 。 
<div id="call"> 
<div id="call tit> 公 司 公告 <Jdiv> 
<div id="call mid"></div > 
<div id="call btm"></div > 
</div> | 
(2) 所 实现 的 样式 表 如 下 ， 最 后 经 过 调整 中 间 块 元 素 的 高 度 以 形成 不 同 的 高 度 的 公告 牌 ， 演 示 | 
效果 如 图 11.2 所 示 。 | 


图 图 图 


回 


<style type="text/css"> 
#call { 
width: 218px; 谍 固定 宽度 */ 
font-size: 14px; /# 字体 大 小 */ 
} 
#call tit { 
background: url(images/call_top.gif); /# 头 部 背景 图 像 */ 
background-repeat:no-repeat; 人 # 不 平 铺 显示 */ 
height: 43px; 让 固定 高 度 ， 与 背景 图 像 高 度 一 致 */ 
color: #fff: /# 白色 标题 机 
font-weight: bold; 此 粗 体 村 
text-align: center; 人 # 居中 显示 所 
line-height: 43px; 人 # 标题 垂直 居中 */ | 
} | 
#call_mid { | 
background-image: url(images/call_mid.gif); ”/* 背景 图 像 */ | 
background-repeat: repeat-y: /# 垂直 平 铺 */ | 
height: 160px: /# 可 自由 设置 的 高 度 */ | 
} | 
#call_ btm { | 
background-image: url(images/call_ btm.giD); ”/* 底部 背景 图 像 */ | 
background-repeat: no-repeat: /# 不 平 铺 显 示 */ | 
height: 11px; 让 固定 高 度 ， 与 背景 图 像 高 度 一 致 */ | 
) 


二 
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3 幅 背 景 图 像 , 2 幅 固 定 ， 
中 间 一 幅 垂直 平 铺 


设置 不 同 高 度 的 栏目 效果 比较 


图 11.2 ”背景 图 像 垂 直 平 铺 示 例 模 拟 效果 
11.1.3 ”设置 显示 位 置 


在 默认 情况 下 ， 背 景 图 像 显示 在 元 素 的 左上 角 ， 并 根据 不 同方 式 执行 不 同 显示 效果 。 为 了 更 好 地 
控制 背景 图 像 的 显示 位 置 ，CSS 定义 了 background-position 属性 来 精确 定位 背景 图 像 。 
单 


| 

| 

| background-position 属性 取 值 包括 两 个 值 ， 它 们 分 别 用 来 定位 背景 图 像 的 x 轴 、y 轴 坐 标 ， 取 值 
| 单位 没有 限制 ， 具 体 用 法 如 下 所 示 。 

SO CI center ight | op | hoton | parcentsses | enets J | Lie | center | iat| 
‘<percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | 
‘<length> J? ] && [ center | [top | bottom ] [ <percentage> | <length> J? ] 
| 默认 值 为 (096 0%)， 等 效 于 left top。 

| 【示例 】 下 面 示例 利用 4 个 背景 图 像 拼接 起 来 一 个 栏目 板块 。 这 些 背景 图 像 分 别 被 定位 到 栏目 的 
4 个 边 上 ， 形 成 一 个 圆 角 的 矩形 ， 并 富有 立体 感 ， 效 果 如 图 11.3 所 示 。 

| 


ne | de ene ei x 
loon idlo" ~ EE 


于 网 页 设计 师 来 说 应 该 好 好 研究 CSS。Zen 
* Garder 致 力 于 推广 和 使 用 CSS 技 术 ， 加 力 激发 和 
鼓励 您 的 灵感 和 参与 。 读 者 可 以 从 浏览 高 手 的 设 

计 作品 入 门 。 只 要 选择 列 款 中 的 任 一 个 样式 表 ， 就 可 六 将 它 加 载 到 这 全 


中 。HTML 文 档 结构 始终 不 变 ， 但 是 读者 可 处 自由 地 修改 和 定义 CSS 笠 


CS El Fata m0n 
二 


| 展示 个 Aj 华 。 。 直至 目前， 委 多 Wi 计 师 和 得 序 只 已经 1 EE 
tt rd 而 平面 设计 师 还 没有 足够 重视 CSS 的 潜 


11.3 背景 图 像 定 位 综合 应 用 
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实例 所 用 到 的 HTML 结构 代码 如 下 。 


<div id="explanation"> | 
<h3><span> 这 是 什么 ?</span></h3> | 
<p class="p1"><span><span class="first"> 对 </span> 于 网 页 设计 师 来 说 应 该 好 好 研究 <acronym | 

title="cascading style sheets">CSS</acronym>。Zen Garden 致力 于 推广 和 使 用 CSS 技术， 努力 激发 和 鼓励 您 的 灵 ， 

感 和 参与 。 读者 可 以 从 浏览 高 手 的 设计 作品 入 门 。 只 要 选择 列表 中 的 任 一 个 样式 表 , 就 可 以 将 它 加 载 到 这 个 页 面 ， 

中 。<acronyn title="hypertext markup language">HTML</acronym> 文 档 结构 始终 不 变 ， 但 是 读者 可 以 自由 地 修改 | Note 

和 定义 <acronym title="cascading style sheets">CSS</acronym> 样 式 表 。</span></p> | 
<p class="p2"><span><acronym title="cascading style sheets">CSS</acronym> 具 有 强大 的 功能 ， 可 以 自由 ， 

控制 HTML 结构 。 当 然 读者 需要 拥有 驾驭 CSS 技术 的 能 力 和 创意 的 灵感 ， 同 时 亲自 动手 ， 用 具体 的 实例 展示 | 

CSS 的 魅力 ， 展 示 个 人 的 才华 。 截 至 目前 ， 很 多 Web 设计 师 和 程序 员 已 经 介绍 过 许多 关于 CSS 应 用 技巧 和 兼容 ， 

技术 的 各 种 技巧 和 案例 。 而 平面 设计 师 还 没有 足够 重视 CSS 的 潜力 。 读 者 是 不 是 需要 从 现在 开始 呢 ?</span></p> ， 

</div> | 


根据 这 个 HTML 结构 所 设计 的 CSS 样式 表 如 下 ， 请 注意 背景 图 像 的 定位 方法 。 


<STYLE type="text/css"> 
body { /* 定义 网 页 背景 色 、 居 中 显示 、 字 体 颜色 */ 
background: #DFDFDF: text-align:center: color: #454545; 


} 
Pp, h3 { margin: 0; padding: 0; } 诈 清除 段落 和 标题 的 默认 边 距 */ 
#explanation { 
background-color: #EEEEE /# 白色 背景 ， 填 充 所 有 区 域 *#/ 
background-image: url(images/img_explanation.jpg); 上 证 指定 背景 图 像 */ 
background-position: left bottom:; /# 定位 背景 图 像 位 于 左下 角 */ 
background-repeat: repeat-y; /#* 在 垂直 方向 上 平 铺 背景 图 像 */ 
width: 546px; /# 固定 栏目 宽度 */ 
margin: 0 auto; 人 # 栏目 居中 显示 */ 
font-size: 13px; line-height:1.6em:; text-indent: 2em; /# 定义 栏目 内 字体 属性 */ 


#explanation h3 { 
background: url(images/title_explanation.gif) no-repeat; 。 /* 顶部 背景 图 像 ， 不 平 铺 */ 


height: 39px; 让 固定 标题 栏 高 度 */ 

#explanation h3 span { display: none; } /# 隐藏 标题 栏 内 信息 */ 

#explanation p { /# 定义 右 侧 背景 图 像 ， 垂 直 平 铺 */ 

background: url(images/right_bg.gif) right repeat-y:} 

#explanation .p2 span { /# 底部 背景 图 像 ， 不 平 铺 */ 
padding-bottom: 20px; 尾 增加 第 二 段 底部 内 边 距 ， 显 示 背 景 图 像 */ 
background: url(images/right_bottom.gif) bottom no-repeat: 

} 


#explanation p span {/* 定义 段落 文本 左 侧 的 内 边 距 ， 以 便 显示 左 侧 背景 图 像 */ | 
padding: 0 15px 10px 77px; | 


display: block; 让 定义 块 状 显 示 ， 内 边 距 才 有 效 所 | 
text-align: left: /# 文本 左 对 齐 *#/ | 
} 
#explanation p .first { /#* 定义 首 字 下 沉 特效 */ | 
font-size: 60px; color: #820015; line-height: lem; 证 字体 显示 属性 */ | 
float: left; 把 向 左 浮动 */ | 
padding: 0; 上 # 清除 上 面 样式 为 段落 定义 的 内 边 距 */ | 


A 
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</STYLE> 


在 上 面 的 样式 表 中 , 通过 分 别 为 不 同 元 素 定义 背景 图 像 ， 然 后 通过 定位 技术 把 背景 图 像 定位 到 对 
全 内 | 应 的 4 个 边 上 ， 并 根据 需要 运用 平 铺 技 术 实现 贺 角 区 域 效果 ， 

gp Ai 注意 :百分比 是 最 灵活 的 定位 方式 ， 同 时 也 是 最 难 把 握 的 定位 单位 。 

在 默认 状态 下 ， 定 位 的 位 置 为 《0% 096)， 定 位 点 是 背景 图 像 的 左上 顶点， 定位 距离 是 该 点 到 包 
， 含 框 左上 角 顶 点 的 距离 ， 即 两 点 重合 。 

| 如 果 定位 背景 图 像 为 100% 100%)， 定 位 点 是 背景 图 像 的 右 下 顶点 ， 定 位 距离 是 该 点 到 包含 框 
左上 角 顶 点 的 距离 ， 这 个 距离 等 于 包含 框 的 宽度 和 高 度 。 

| 百分比 也 可 以 取 负 值 ， 负 值 的 定位 点 是 包含 框 的 左上 项 点 ， 而 定位 距离 则 以 图 像 自身 的 宽 和 高 来 
| 决定 


| CSS 还 提供 了 5 个 关键 字 : left、right、center、top 和 bottom。 这 些 关 键 字 实际 上 就 是 百分比 特 
| 殊 值 的 一 种 固定 用 法 ， 详 细 列表 说 明 如 下 。 


上 # 普通 用 法 %% 

top left、left top =0% 0% 
Tight top、 top right = 100% 0% 
bottom left、left bottom =0% 100% 
bottom right、 right bottom = 100% 100% 
上 # 居中 用 法 所 

center、center center = 50% 50% 
局 特殊 用 法 */ 

top、 top center、center top = 50% 0% 
left、 left center、center left =0% 50% 
right、 right center、center right =100% 50% 
bottom、bottom center、center bottom = 50% 100% 


.1.4 设置 固定 背景 
在 默认 情况 下 ,背景 图 像 能 够 跟随 网 页 内 容 上 下 滚动 。 可 以 使 用 background-attachment 属性 定义 


拓 且 站 办 | 背景 图 像 在 窗口 内 国定 显示 ， 具 体 用 法 如 下 。 


background-attachment: fixed | local | scroll 


默认 值 为 scroll， 具 体 取 值 说 明 如 下 。 
fixed: 背景 图 像 相对 于 浏览 器 窗 体 固定 。 
回 scroll: 背景 图 像 相 对 于 元 素 固定 ， 也 就 是 说 当 元 素 内 容 滚动 时 背景 图 像 不 会 跟着 滚动 ， 因 
为 背景 图 像 总 是 要 跟着 元 素 本 身 。 
回 local: 背景 图 像 相 对 于 元 素 内 容 固定 ， 也 就 是 说 当 元 素 内 容 滚动 时 背景 图 像 也 会 跟着 滚动 ， 
此 时 不 管 元 素 本 身 是 否 滚动 ， 当 元 素 显 示 滚 动 条 时 才 会 看 到 效果 。 该 属性 值 仅 CSS3 支持 。 
| 【示例 】 在 下 面 的 示例 中 ， 为 <body> 标 签 设置 背景 图 片 ， 且 不 平 铺 、 固 定 ， 这 时 通过 拖 动 浏览 
| 器 滚动 条 ， 可 以 看 到 网 页 内 容 在 滚动 ， 而 背景 图 片 静止 显示 ， 页 面 演示 效果 如 图 11.4 所 示 。 
| <style type="text/css"> 
body { 
background-image: url(images/bg.jpg):; /# 设置 背景 图 片 */ 


有 和 


使 用 CSS3 背景 图 僚 和 渐变 背景 


background-repeat: no-repeat: /# 背景 图 片 不 平 铺 */ 
background-position: left center; 让 背景 图 片 的 位 置 */ 
background-attachment: fixed; 旋 背景 图 片 固定 ， 不 随 滚动 条 滚动 而 滚动 */ 
height: 1200px; 诊 高 度 ， 出 现 浏览 器 的 滚动 条 */ 

} 

#box {float: right; width: 400px:} 

</style> 

<div id="box"> Note 
<hl> 雨 起 </hl> 
<h2> 戴 望 舒 </h2> 


<pre> 
撑 着 油纸 伞 ， 独 自 
入 和 在 修长、 做 长 
又 窗 室 的 雨 埠 ， 
我 希望 和 着 
一 个 丁香 一 样 的 
结 着 愁 组 的 姑娘 。 


</pre> | 
</div> 


像 林 一般 地 ， 
像 橄 一 艇 地 滞 钙 迷 范 。 
像 基 中 加 过 


图 11.4 背景 图 片 固定 


11.1.5 设置 定位 原点 


background-origin 属性 定义 background-position 属性 的 定位 原点 。 在 默认 情况 下 ，background- 加 中 
position 属性 总 是 根据 元 素 左上 角 为 坐标 原点 进行 定位 背景 图 像 。 使 用 background-origin 属性 可 以 改 一 


变 这 种 定位 方式 。 该 属性 的 基本 语法 如 下 所 示 。 
background-origin: border-box | padding-box | content-box:; 
取 值 简单 说 明 如 下 。 
回 ”borderbox: 从 边框 区 域 开始 显示 背景 。 
回 ”padding-box: 从 补 白 区 域 开始 显示 背景 ， 为 默认 值 。 | 


i 
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eR 
content-box: 仅 在 内 容 区 域 显示 背景 。 
【示例 】background-origin 属性 改善 了 背景 图 像 定 位 的 方式 ， 更 灵活 地 决定 背景 图 像 应 该 显示 的 
a 下 面 示 例 利 用 background-origin 属性 重 设 背 景 图 像 的 定位 坐标 ， 以 便 更 好 地 控制 背景 图 像 的 显 
示 ， 演 示 效 果 如 图 11.5 所 示 。 


[lecalhortson/mysite x 全 


@ localhost 08/mysite /test himl 


高 双 娇 " 亦 壁 剑 古 


苏 全 


江东 去 ， 浪 淘 尽 ,千古 风流 人 物 。 故 双 西 边 ， 人 着 录 ， 三 国 周 即 赤 焉 。 乱 石 罕 宝 人 惊 济 拍 涯 、 可 
写 - 江山 加 画 ， 一 时 多 少 豪 态 . 


衣 李 公开 当年 ， 小 乔 初 巡 了 ， 朴 俗 英 发 ， 羽 语 给 巾 ， 谈 笑 可 ， 柄 权 灰 飞 烟 灭 。 故 国 神 游 ， 多 情 应 笑 我 
生 华发 。 人 生 如 梦 ， 一 站 还 业 江 月 。 


wh 


图 11.5 设计 诗词 效果 
示例 代码 如 下 所 示 。 


<style type="text/css"> 
div {* 定 义 包含 框 的 样式 */ 
height: 322px:; 
width: 780px; 
border: solid 1px red; 
padding: 250px 4em 0; 
人 # 为 了 避免 背景 图 像 重 复 平 铺 到 边框 区 域 ， 应 禁止 它 平 铺 所 
background: url(images/p3.jpg) no-repeat; 
让 设计 背景 图 像 的 定位 坐标 点 为 元 素 边 框 的 左上 角 */ 
background-origin: border-box; 
将 背景 图 像 等 比 缩放 到 完全 覆盖 包含 框 ， 背 景 图 像 有 可 能 超出 包含 框 */ 
background-size: cover; 


overflow: hidden; 族 隐 藏 超出 包含 框 的 内 容 */ 
} 
div hl, div h2{/* 定 义 标题 样 式 */ 
font-size: 18px; font-family: " 幼 圆 "; 
text-align: center; 证 水 平 居 中 显示 */ 
有 
divp {/* 定 义 正文 样式 */ 
text-indent: 2em; 此 首 行 缩 进 两 个 字符 */ 
line-height: 2em:; 访 增 大 行 高 ， 让 正文 看 起 来 更 疏 朗 */ 
margin-bottom: 2em; 证 调 整 底部 边界 ， 增 大 段落 文本 距离 */ 
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} | 
</style> | 
<div> | 
<hl> 念 奴 娇 &#8226; 赤 壁 怀古 </h1> 
<h2> 苏 轼 </h2> | 估 站 
<p> 大 江东 去 ， 浪 淘 尽 ,千古 风流 人 物 。 故 又 西边 ， 人 道 是 ， 三 国 周 郎 赤 壁 。 乱 石 穿 宅 ， 惊 涛 拍 岸 , 卷 一 一 
起 千 堆 雪 。 江 山 如 画 ， 一 时 多 少 豪杰 。</p> Note 


<p> 禹 想 公 瑾 当年 ， 小 乔 初 嫁 了 ， 雄 姿 英 发 。 羽 扇 纶 巾 ， 谈 笑 间 ， 村 榴 灰飞烟灭 。 故 国 神游 ， 多 情 应 笑 
我 ， 早 生 华 发 。 人 生 如 梦 ， 一 尊 还 栈 江 月 。</p> 
</div> | 


11.1.6 ”设置 裁剪 区 域 


background-clip 属性 定义 背景 图 像 的 裁剪 区 域 。 该 属性 的 基本 语法 如 下 所 示 。 
background-clip: border-box | padding-box | content-box | text: 


取 值 简单 说 明 如 下 。 

回 ”border-box: 从 边框 区 域 向 外 裁剪 背景 ， 为 默认 值 。 
回 ”padding-box: 从 补 白 区 域 向 外 裁剪 背景 。 

回 content-box: 从 内 容 区 域 向 外 裁剪 背景 。 

回 text: 从 前 景 内 容 〈 如 文字 ) 区 域 向 外 裁剪 背景 。 


疙 提示 : 如 果 取 值 为 padding-box， 则 background-image 将 忽略 补 白 边 缘 ， 此 时 边框 区 域 显示 为 迁 明 . 
如 果 取 值 为 border-box， 则 background-image 将 包括 边框 区 域 。 
如 果 取 值 为 content-box， 则 background-image 将 只 包含 内 容 区 域 。 
如 果 background-image 属性 定义 了 多 重 背 景 ， 则 background-clip 属性 值 可 以 设置 多 个 值 ， 
并 用 过 号 分 隔 。 
如 果 background-clip 属性 值 为 padding-box，background-origin 属性 取 值 为 border-box， 且 
background-position 属性 值 为 "top left' ( 默认 初始 值 ) ， 则 背景 图 左上 角 将 会 被 截取 掉 部 分 。 


【示例 】 下 面 示例 演示 如 何 设计 背景 图 像 仅 在 内 容 区 域内 显示 ， 演 示 效 果 如 图 11.6 所 示 。 


<style type="text/css"> 

div{ 
height: 1S0px; 
width: 300px; 
border: solid 50px gray; 
padding: 50px:; 
background: url(images/bg.jpg) no-repeat: 
让 将 背景 图 像 等 比 缩放 到 完全 覆盖 包含 框 ， 背 景 图 像 有 可 能 超出 包含 框 所 
background-size: cover; | 
放 将 背景 图 像 从 content 区 域 开始 向 外 裁剪 背景 */ 
background-clip: content-box; 

} 

</style> 

<div></div> 
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| 图 11.6 以 内 容 边 缘 裁 切 背 景 图 像 效 果 
11.1.7 ”设置 背景 图 像 大 小 


background-size 属性 可 以 控制 背景 图 像 的 显示 大 小 ， 该 属性 的 基本 语法 如 下 所 示 。 

background-size: [ <length> | <percentage> | auto ]{1,2} | cover | contain; 

取 值 简单 说 明 如 下 。 

回 ”<length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 

加 ”<percentage>: 取 值 为 0% 一 100% 的 值 ， 不 可 为 负 值 。 

cover: 保持 背景 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩放 到 正好 完全 覆盖 所 定义 背景 的 区 域 。 

contain: 保持 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩放 到 宽度 或 高 度 正好 适应 所 定义 背景 区 域 。 

初始 值 为 auto。background-size 属性 可 以 设置 一 个 或 两 个 值 ， 一 个 为 必 填 ， 一 个 为 可 选 。 其 中 ， 
第 一 个 值 用 于 指定 背景 图 像 的 width， 第 二 个 值 用 于 指定 背景 图 像 的 height， 如 果 只 设置 一 个 值 ， 则 
第 二 个 值 默 认为 auto。 

【示例 】 下 面 示例 使 用 image-size 属性 自由 定制 背景 图 像 的 大 小 , 让 背景 图 像 自 适应 盒子 的 大 小 ， 
| 从 而 可 以 设计 与 模块 大 小 完全 适应 的 背景 图 像 ， 本 示例 效果 如 图 11.7 所 示 ， 只 要 背景 图 像 长 宽 比 与 
元 素 长 宽 比 相同 ， 就 不 用 担心 背景 图 像 变形 显示 。 


图 11.7 设计 背景 图 像 自 适 应 显示 
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示例 代码 如 下 所 示 。 


<style type="text/css"> 

div{ 
margin: 2px; 
float: left; 
border: solid 1px red; 
background: url(images/img2.jpg) no-repeat center; 
信 设计 背景 图 像 完 全 覆盖 元 素 区 域 */ 
background-size:cover;} 

上 # 设计 元 素 大 小 */ 

.hl { height: 80px; width: 110px; } 

.h2 { height: 400px; width: 550px; } 

</style> 

<div class="h1"></div> 

<div class="h2"></div> 


11.1.8 ”设置 多 重 背 景 图 像 


CSS3 支持 在 同一 个 元 素 内 定义 多 个 背景 图 像 ， 还 可 以 将 多 个 背景 图 像 进行 个 加 显示 ， 从 而 使 得 | | 视频 讲解 
设计 多 图 背景 栏目 变 得 更 加 容易 。 
【示例 】 本 例 使 用 CSS3 多 背景 设计 花边 框 , 使 用 background-origin 定义 仅 在 内 容 区 域 显 示 背 景 ， 
使 用 background-clip 属性 定义 背景 从 边框 区 域 向 外 裁剪 ， 如 图 11.8 所 示 。 


图 11.8 设计 花边 框 效果 


示例 代码 如 下 所 示 。 


<style type="text/css"> | 

.demo { | 
谨 设计 元 素 大 小 、 补 白 、 边 框 样式 ， 边 框 为 20px， 颜 色 与 背景 图 像 色 相同 */ | 
width: 400px; padding: 30px 30px; border: 20px solid rgba(104, 104, 142,0.5); | 
入 定义 圆 角 显示 */ | 
border-radius: 10px:; | 
上 # 定义 字体 显示 样式 */ 
color: #f36; font-size: 80px: font-family:" 隶 书 ";line-height: 1.5; text-align: center: 

} 

-multipleBg { 
从 定义 5 个 背景 图 分 别 定 位 到 4 个 顶 角 ， 其 中 前 4 个 禁止 平 铺 ， 最 后 一 个 可 以 平 铺 */ 
background: url("images/bg-tl. png") no-repeat left top, | 
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url("images/bg-tr.png") no-repeat right top, 

url("images/bg-bl.png") no-repeat left bottom, 

url("images/bg-br.png") no-repeat right bottom., 

url("images/bg-repeat.png") repeat left top; 
必 改变 背景 图 像 的 position 原点 ，4 采花 都 是 border 原点 ; 平 铺 背 景 是 paddin 原点 */ 
background-origin: border-box, border-box, border-box, border-box, padding-box: 


Note 洗 控制 背景 图 像 的 显示 区 域 ， 所 有 背景 图 像 超 过 border 外 边缘 都 将 被 剪 切 掉 */ 
background-clip: border-box; 
| } 
</style> 


| <div class="demo multipleBg"> 恭 喜 发 财 </div> 
11.2 设计 渐变 背景 


| W3C 于 2010 年 11 月 正式 支持 渐变 背景 样式 ， 该 草案 作为 图 像 值 和 图 像 蔡 换 内 容 模块 的 一 部 分 
| 进行 发 布 。 主 要 包括 lineargradientO 、radial-gradientO 、repeating-linear-gradient() 、repeating-radial- 
| gradientO 4 个 渐变 函数 。 


11.2.1 定义 线性 渐变 
创建 一 个 线性 渐变 ， 至 少 需要 两 个 颜色 ， 也 可 以 选择 设置 一 个 起 点 或 一 个 方向 。 简 明 语法 格式 如 下 。 


linear-gradient(angle, color-stopl, color-stop2, ...) 


参数 简单 说 明 如 下 。 

回 angle: 用 来 指定 渐变 的 方向 ， 可 以 使 用 角度 或 者 关键 字 来 设置 。 关 键 字 包括 4 个， 说明 如 下 。 
to left: 设置 渐变 从 右 到 左 ， 相 当 于 270deg。 

to right: 设置 渐变 从 左 到 右 ， 相 当 于 90deg 

to top: 设置 渐变 从 下 到 上 ， 相 当 于 0deg 

to bottom: 设置 渐变 从 上 到 下 ， 相 当 于 180deg， 该 值 为 默认 值 。 


次 提示 如果 创建 对 角 线 渐变 ， 可 以 使 用 to top left (从 右 下 到 左上 ) 类似 组 合 来 实现 ， 


回 “color-stop: 用 于 指定 渐变 的 色 点 。 包 括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜 色 值 和 起 点 位 置 以 空 
格 分 隔 。 起 点 位 置 可 以 为 一 个 具体 的 长 度 值 (不 可 为 负 值 ); 也 可 以 是 一 个 百分比 值 ， 如 果 
是 百分比 值 则 参考 应 用 渐变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 

【示例 1】 下 面 示例 为 <div id="demo"> 对 象 应 用 了 一 个 简单 的 线性 渐变 背景 ,方向 从 上 到 下 ， 鼎 
| 色 由 白色 到 浅 灰 显示 ， 效 果 如 图 11.9 所 示 。 


v 


Vvyv 


| <style type="text/css"> 

| #demo { 

| width: 300px; 

height: 200px: 

background: linear-gradient(#ffF, #333); 


</style> 


| } 
| <div id="demo"></div> 


2 


第 1]] 章 使 用 CSS3 背景 图像 和 渐变 背景 


Ct- hcp//ocaho.. - ac 


图 11.9 应 用 简单 的 线性 渐变 效果 


准 提示 : 针对 示例 1， 用 户 可 以 继续 尝试 做 下 面 练习 ， 实 现 不 同 的 设置 ， 得 到 相同 的 设计 效果 。 
设置 一 个 方向 ， 从 上 到 下 ， 覆 盖 默 认 值 。 
linear-gradient(to bottom, #fff, #333); 
回 ”设置 反 向 渐变 : 从 下 到 上 ， 同 时 调整 起 止 颜色 位 置 。 
linear-gradient(to top, #333, #ffp; 
回 ”使 用 角度 值 设 置 方向 。 
linear-gradient(180deg, #EEE #333); 
加” 明确 起 止 颜 色 的 具体 位 置 ， 覆 盖 默 认 值 。 
linear-gradient(to bottom, #ffF 0%, #333 100%); 
【示例 2】 下 面 示例 针对 示例 1， 兼 容 早期 Webkit 引擎 的 线性 渐变 实现 方法 。 
#demo { 
width:300px; height:200px; 
background: -webkit-gradient(linear, left top, left bottom, from(#ttp, to(#333)); 
background: linear-gradient(#fff, #333); 
} | 
上 面 示例 定义 线性 渐变 背景 色 ， 从 顶部 到 底部 ， 从 白色 向 浅 灰色 渐变 显示 ， 在 谷歌 的 Chrome 浏 | 
览 器 中 所 见效 果 与 图 11.9 相同 。 | 
另外 ，Webkit 引擎 也 支持 使 用 -webkit-linear-gradient() 私 有 函数 来 设计 线性 渐变 。 该 函数 用 法 与 标 
准 函数 linear-gradient0 的 语法 格式 基本 相同 。 | 
Firefox 浏览 器 从 3.6 版 本 开始 支持 渐变 ，Gecko 引擎 定义 了 -moz-linear-gradient() 私 有 函数 来 设计 | 
线性 渐变 。 该 函数 用 法 与 标准 函数 lineargradientO 的 语法 格式 基本 相同 。 唯 一 区 别 就 是 ， 当 使 用 关键 
字 设 置 渐变 方向 时 ， 不 带 to 关键 字 前 级 ， 关 键 字 语义 取 反 。 例 如 ， 从 上 到 下 应 用 渐变 ， 标 准 关键 字 ， 
为 to bottom，Firefox 私有 属性 可 以 为 top。 | 
【示例 3】 下 面 示例 针对 示例 1， 兼 容 早期 Gecko 引擎 的 线性 渐变 实现 方法 。 


#demo { 

width: 300px: height: 200px: 

background: -webkit-gradient(linear, left top, left bottom, from(#f1f), to(#333)); 

background: -moz-linear-gradient(top, #fff, #333); 

background: linear-gradient(#ffF, #333); | 
} L 
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11.2.2 ”定义 径 向 渐变 
视频 讲解 | 创建 一 个 径 向 渐变 ， 也 至 少 需要 定义 两 个 颜色 ， 同 时 可 以 指定 渐变 的 中 心 点 位 置 、 形 状 类 型 ( 圆 


到 。 形 或 顶 贺 形 ) 和 半径 大 小 ， 简 明 语法 格式 如 下 。 
radial-gradient(shape size at position, color-stopl, color-stop2, ...); 

参数 简单 说 明 如 下 。 

回 ”shape: 用 来 指定 渐变 的 类 型 ， 包 括 circle〈 圆 形 ) 和 ellipse〈 椭 圆 ， 两 种 。 

size: 如 果 类 型 为 circle， 指 定 一 个 值 设置 圆 的 半径 ， 如 果 类 型 为 ellipse， 指 定 两 个 值 分 别 设 
置顶 圆 的 x 轴 和 y 轴 半 径 。 取 值 包括 长 度 值 、 百 分 比 、 关 键 字 ， 关 键 字 说 明 如 下 。 
> closest-side: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 边 。 
> closest-corner: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 角 。 
> ”farthest-side: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 远 的 边 。 
六 ”farthest-cormer: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 远 的 角 。 

加 ”position: 用 来 指定 中 心 点 的 位 置 。 如 果 提 供 两 个 参数 ， 第 一 个 表示 x 轴 坐 标 ， 第 二 个 表示 y 
轴 坐 标 ， 如 果 只 提供 一 个 值 ， 第 二 值 默认 为 50%， 即 center。 取 值 可 以 是 长 度 值 、 百 分 比 或 
者 关键 字 ， 关 键 字 包括 left ( 左 侧 ) 、center (中 心 ) 、right( 右 侧 )、top〔 顶 部 ) 、center 
(中 心 ) 、bottom (底部 ) 。 


< 注意 : position 值 位 于 shape 和 size 值 后 面 。 


回 color-stop: 用 于 指定 渐变 的 色 点 。 包 括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜 色 值 和 起 点 位 置 以 空 
格 分 隔 。 起 点 位 置 可 以 为 一 个 具体 的 长 度 值 (不 可 为 负 值 ) ， 也 可 以 是 一 个 百分比 值 ， 如 果 
是 百分比 值 则 参考 应 用 渐变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 
| 【示例 1】 在 默认 情况 下 ， 渐 变 的 中 心 是 center (对 象 中 心 点 )， 渐 变 的 形状 是 ellipse( 椭 圆 形 )， 
| 渐变 的 大 小 是 farthest-comer (表示 到 最 远 的 角落 )。 下 面 示例 仅 为 radial-gradient0 函 数 设 置 3 个 颜色 
| 值 ， 则 它 将 按 默 认 值 绘制 径 向 渐变 效果 ， 如 图 11.10 所 示 。 


<style type="text/css"> 

#demo { 
height: 200px: 
background: -webkit-radial-gradient(red, green, blue); /* Safari S.1 -6.0 */ 
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ 
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6- 15 */ 
background: radial-gradient(red, green, blue); 片 标准 语法 */ 

</style> 

<div id="demo"></div> 


， 涪 提示 :针对 示例 1， 用户 可 以 继续 归 试 做 下 面 的 统 习 ， 实 现 不 同 的 设置 ， 得 到 相同 的 设计 落果 。 
| 回 ”设置 径 向 渐变 形状 关 型 ， 默 认 值 为 ellipse. 

background: radial-gradient(ellipse, red, green, blue): 

回 ”设置 径 向 渐变 中 心 点 坐标 ， 默 认为 对 象 中 心 点 。 

background: radial-gradient(ellipse at center 50%%, red, green, blue): 
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background: radial-gradient(farthest-corner red, green, blue); 


设置 径 向 渐变 大 小 ， 这 里 定义 填充 整个 对 象 。 
【示例 2】 下 面 示例 设计 一 个 红色 圆 球 ， 并 逐步 径 向 渐变 为 绿色 背景 ， 兼容 早期 Webkit 引擎 的 线 


ZA 
性 浙 变 实现 方法 。 代 码 如 下 所 示 ， 演 示 效果 如 图 11.11 所 示 。 加 会 纵 
<style type="text/css"> Note 
#demo { 
height:200px; 


店 Webkit 引擎 私有 用 法 */ 
background: -webkit-gradient(radial, center center, 0, center center 100, from(red), to(green)); 
background: radial-gradient(circle 100px, red, green); /* 标准 的 用 法 */ | 
! 
</style> 
<div id="demo"></div> 


[lecalhosts030/mysite x Ne 


GC | © localhost:3080/my 


CE tnocathest: -Bec| iocanost 


图 11.10 设计 简单 的 径 向 渐变 效果 图 11.11 设计 径 向 圆 球 效果 


另外 ，Webkit 引擎 也 支持 -webkit-radial-gradient0 私 有 函数 来 设计 径 向 渐变 。 该 函数 用 法 与 标准 函 | 
数 radial-gradient0 的 语法 格式 类 似 ， 简 明 语 法 格式 如 下 。 | 


-webkit-radial-gradient(position, shape size, color-stop1, color-stop2, ...); 


Gecko 引擎 定义 了 -moz-radial-gradient0 私 有 函数 来 设计 径 向 渐变 。 该 函数 用 法 与 标准 函数 
radial-gradientO 的 语法 格式 也 类 似 ， 简 明 语 法 格式 如 下 。 | 


-moz-radial-gradient(position, shape size, color-stop1, color-stop2, ...); | 
总 提示 : 上 面 两 个 私有 函数 的 size 参数 值 仅 可 设置 关键 字 : closest-side、closest-comer、farthest-side、 


farthest-comer、contain 或 cover。 | 


11.3 案例 实战 


本 节 将 通过 多 个 较 复 杂 案 例 练习 背景 样式 的 实际 应 用 。 | 
11.3.1 设计 条 纹 背景 


如 果 多 个 色 点 设置 相同 的 起 点 位 置 ， 它 们 将 产生 一 个 从 一 种 颜色 到 另 一 种 颜色 的 急剧 的 转换 。 从 加 吝 瑟 和 
效果 来 看 ， 就 是 从 一 种 颜色 突然 改变 到 另 一 种 颜色 ， 这 样 可 以 设计 条 纹 背景 效果 。 | 
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【示例 1】 定 义 一 个 简单 的 条 纹 背景 ， 效 果 如 图 11.12 所 示 。 


<style type="text/css"> 
#demo { 
height: 200px; 
background: linear-gradient(#cd6600 50%, #0067cd 50%); 


} 
</style> 
<div id="demo"></div> 


【示例 2】 利 用 背景 的 重复 机 制 ， 可 以 创造 出 更 多 的 条 纹 。 示 例 代码 如 下 所 示 ， 效 果 如 图 11.13 


所 示 。 这 样 就 可 以 将 整个 背景 划分 为 10 个 条 纹 ， 每 个 条 纹 的 高 度 一 样 。 
| #demo { 
height: 200px; 
background: linear-gradient(#cd6600 50%, #0067cd 50%); 
background-size: 100% 20%; /* 定义 单个 条 纹 仅 显示 高 度 的 五 分 之 一 */ 


| 图 11.12 设计 简单 的 条 纹 效果 图 11.13 设计 重复 显示 的 条 纹 效果 
【示例 3】 如 果 设 计 每 个 条 纹 高 度 不 同 ， 只 要 改变 比例 即 可 ,示例 代码 如 下 所 示 ， 效 果 如 图 11.14 
所 示 。 
#demo { 
height: 200px: 


background: linear-gradient(#cd6600 80%, #0067cd 0%):/* 定 义 每 个 条 纹 位 置 占 比 不 同 */ 
background-size: 100% 20%; /* 定义 单个 条 纹 仅 显示 高 度 的 五 分 之 一 */ 


所 图 你 echos 


| 图 11.14 设计 不 同 高 度 的 条 纹 效果 
【示例 4】 设 计 多 色 条 纹 背景 ， 代 码 如 下 所 示 ， 效 果 如 图 11.15 所 示 。 


#demo { 
height: 200px: 
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人 # 定义 三 色 同 宽 背 景 */ 
background: linear-gradient(#cd6600 33.3%, #0067cd 0, #0067cd 66.6%, #00cd66 0): 
background-size: 100% 30px; 
} 


【示例 5】 设 计 密 集 条 纹 格 效果 ， 代 码 如 下 所 示 ， 效 果 如 图 11.16 所 示 。 


ron BA 
height: 200px: 
background: linear-gradient(rgba(0,0,0,.5) 1px, #fff 1px): 
background-size: 100% 3px: 

} 


«<3 全 女 这 G | & localhost:8080/mysite/testS.htm| 


| 
| 
| 
| 
| 
| 
| 
| 
[localhost3080/mysite, x Wl | 
| 
| 
| 
| 
| 
| 
| 
| 
| 


图 11.15 设计 多 色 条 纹 效果 图 11.16 设计 密集 条 纹 效果 


< 注意 : IE 浏览 器 不 支持 这 种 设计 效果 。 


【示例 6】 设 计 垂直 条 纹 背景 ， 只 需要 转换 一 下 宽 和 高 的 设置 方式 ， 具 体 代 码 如 下 所 示 ， 效 果 如 | 
图 11.17 所 示 。 | 


#demo { | 
height: 200px: | 
background: linear-gradient(to right, #cd6600 50%, #0067cd 0): | 
background-size: 20% 100%:; | 

} | 

【示例 7】 设 计 简单 的 纹理 背景 代码 如 下 所 示 ， 效 果 如 图 11.18 所 示 。 | 


#demo { 
height: 200px; 
background: linear-gradient(45deg, RGBA(0.103.205.0.2) 50%, RGBA(0.103.205.0.1) 50%): 
background-size: S0px 50px: 

a 


a 
Oe Geese "BE Oe es. ，7E 


图 11.17 设计 垂直 条 纹 效 果 图 11.18 设计 简单 的 纹理 效果 | 


:21s 


| < SS [网 半 设 计 与 网 站 妹 设 从 入 门 到 精通 ( 微 课 精 编 版 ) 


¥ 


| SD 
， 记 提 示 : 在 实际 应 用 中 ， 不 建议 使 用 太 多 的 背景 颜色 ， 一 般 可 以 考虑 使 用 一 种 背景 色 ， 并 在 这 个 颜 
色 的 深浅 上 设计 变化 。 


全 7 11.3.2 ”设计 网 页 背景 
Note | 【示例 1】 为 页 面 琶 加 多 个 径 向 渐变 背景 ， 可 以 营造 虚幻 的 页 面 氛围 。 本 节 示 例 代 码 如 下 所 示 ， 
预览 效果 如 图 11.19 所 示 。 


<style type="text/css"> 
html, body{ height:100%;} 
body { 
background-color: #4B770A; 
background-image: 
radial-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)), 
radial-gradient(at 10% 5%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 20%), 
Tadial-gradient(at left bottom , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 20%), 
radial-gradient(at right top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 20%), 
radial-gradient(at 85% 90% , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 20%); 


} 
</style> 


在 上 面 示例 1 代码 中 ， 首 先 设计 body 高 度 满 屏 显示 ， 避 免 无 内 容 时 看 不 到 效果 ;然后 为 页 面 定 
义 一 个 基本 色 #4B770A; 再 设计 5 个 径 向 渐变 ， 分 别 散 布 于 页 面 4 个 顶 角 ， 以 及 中 央 位 置 ， 同 时 定义 
径 向 渐变 的 第 一 个 颜色 为 半 透明 的 白色 , 第 二 个 颜色 为 透明 色 ， 从 而 在 页 面 不 同位 置 蒙 上 轻重 不 一 的 
白粉 效果 ， 以 此 来 模拟 虚幻 莫 测 的 背景 效果 。 

【示例 2】 为 页 面倒 加 4 个 径 向 渐变 背景 ， 设 计 密 密 麻 麻 的 针脚 纹理 效果 。 本 节 示 例 代码 如 下 所 
示 ， 预 览 效果 如 图 11.20 所 示 。 


<style type="text/css"> 
html, body{ height:100%:} 
body { 
background-color: #282828; 
background-image: 
-webkit-radial-gradient(black 15%, transparent 16%), 
-webkit-radial-gradient(black 15%, transparent 16%), 
-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); 
background-image: 
radial-gradient(black 15%, transparent 16%), 
radial-gradient(black 15%, transparent 16%), 
radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); 
background-position: 
0 Opx, 
8px 8px, 
0 lpx, 
8px 9px; 
background-size: 16px 16px: 
} 
</style> 
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图 11.19 设计 多 个 径 向 渐变 背景 效果 图 11.20 设计 针脚 纹理 背景 效果 


在 上 面 示例 中 ， 首 先 使 用 “background-size: 16px 16px;” 定 义 背 景 图 大 小 为 16 像素 x16 像素 ; 在 ， 
这 块 小 图 上 设计 4 个 径 向 渐变 ,包括 两 个 深 色 径 向 渐变 和 两 个 浅 色 径 向 渐变 ; 使 用 “background-position: | 
0 0px, 8px 8px, 0 1px, 8px 9px; ”设计 一 深 一 浅 径 向 渐变 错位 营 加 ,在 y 轴 上 错位 一 个 像素 ， 从 而 在 16 ， 
像素 x16 像素 大 小 的 浅 色 背 景 图 上 设计 了 两 个 深 色目 陷 效 果 ; 最 后 ， 借 助 背景 图 平 铺 ， 为 网 页 设计 上 | 
述 纹理 特效 。 | 


11.3.3 ”设计 图 标 


本 例 通过 CSS3 径 向 渐变 制作 圆 形 图 标 特效 ， 设 计 效果 如 
图 11.21 所 示 。 在 内 部 样式 表 中 ， 使 用 radial-gradientO 函 数 为 
图 标 标签 定义 径 向 渐变 背景 ， 设 计 立 体 效果 ; 使 用 “border- 
radius: 50%:;” 声 明定 义 图 标 显 示 为 圆 形 ， 使 用 box-shadow 属 
性 为 图 标 添加 投影 ， 使 用 text-shadow 属性 为 图 标 文本 定义 润 
边 效 果 ; 使 用 radial-gradient 设计 环形 径 向 渐变 效果 ， 为 图 标 
添加 高 亮 特 效 。 

示例 主要 代码 如 下 。 

<style type="text/css"> 

-icon { 
谨 固定 大 小 ， 可 根据 实际 需要 酌情 调整 ， 调 整 时 应 同步 调整 “line-height:60px;” */ 
width: 60px; height: 60px: 
必 行内 块 显示 ， 统 一 图 标 显示 属性 */ 
display:inline-block: 
任 清除 边框 ， 避 免 边 框 对 整体 特效 的 破坏 */ 
border: none; 
从 设计 圆 形 效果 */ 
border-radius: S09%6: | 
让 定义 图 标 阴影 ， 第 一 个 外 阴影 设计 立体 效果 ， 第 二 个 内 阴影 设计 高 亮 特效 */ | 
box-shadow: 0 1px Spx rgba(255,255,255,.5) inset, | 

0 -2px 5px rgba(0,0,0,.3) inset, 0 3px 8px rgba(0,0,0,.8); 

从 定义 径 向 渐变 ， 模 拟 明暗 变化 的 表面 效果 */ 
background: -webkit-radial-gradient( circle at top center, #f28fb8, #e982ad, #ec568c); 
background: radial-gradient(circle at top center, #f28fb8, #e982ad, #ec568c); | 
让 定义 图 标 字体 样式 */ | 
font-size: 32px: | 
color: #dd5183; | 


x 
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图 11.21 设计 径 向 渐变 图 标 效果 
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| text-align: center; 上 诊 文本 水 平 居中 显示 */ 
line-height: 60px: ”/* 文本 垂直 居中 显示 ， 必 须 与 “height: 60px; ”保持 一 致 */ 
上 # 为 文本 添加 阴影 ， 第 一 个 阴影 设计 立体 效果 ， 第 二 个 阴影 定义 高 亮 特效 所 
text-shadow: 0 3px 10px #f1a2c1, 

0 -3px 10px #f1a2cl1; 


Note ee 
| <div class="icon">Dw</div> 
<span class="icon">F]</span> 
<p class="icon">PS</p> 


11.3.4 ”特殊 渐变 应 用 场景 


二 后 二 这 | 渐变 可 以 用 在 包括 border-image-source、background-image、list-style-image、cursor 等 属性 上 ， 
| 用 来 取代 url 属性 值 。 前 面 各 节 主要 针对 background-image 属性 进行 介绍 ， 下 面 结合 示例 介绍 其 他 属 
”性 的 应 用 情形 。 
| 1. 定义 渐变 效果 的 边框 

【示例 1】 本 例 通过 CSS3 渐变 ， 为 border-image 属性 定义 渐变 边框 ， 效 果 如 图 11.22 所 示 。 
<style type="text/css"> 
div{ 
width: 400px; 
height: 200px; 
margin: 20px; 
border: solid #000 50px; 
-webkit-border-image:-webkit-linear-gradient(yellow, blue 20%, #0f0) 50; /* Safari 5.1- 6.0 */ 


-0-border-image: -0-linear-gradient(yellow, blue 20%, #0f0) 50; /* Opera 11.1 - 12.0 */ 
-moz-border-image: -moz-linear-gradient(yellow, blue 20%, #0f0) 50; /* Firefox 3.6- 15 */ 
border-image: linear-gradient(yellow, blue 20%, #0f0) 50; 证 标准 语法 类 

} 

</style> 

<div></div> 


2. 定义 填充 内 容 效果 
| 【示例 2】 本 示例 通过 content 属性 ， 为 <div class="divl"> 标 签 嵌入 一 个 通过 渐变 设计 的 圆 球 ， 同 
| 时 为 这 个 包含 框 设 计 一 个 渐变 背景 ， 从 而 产生 一 种 透视 框 的 效果 ， 如 图 11.23 所 示 (testl html)。 


<style type="text/css"> 
-divl { 和 # 设计 包含 框 的 外 形 和 大 小 */ 
width: 400px; height: 200px: 
| border: 20px solid #A7D30C:; 
| 上 
| .divl:before { 
上 # 在 div 元 素 前 插入 内 容 对 象 ， 在 该 对 象 中 绘制 一 个 背景 图 形 并 定义 显示 边框 效果 */ 
/* Safari 5.1 - 6.0 */ 
content: -webkit-radial-gradient(left bottom, farthest-side, #f00, #f99 60px, #005); 
/* Opera 11.6- 12.0 */ 
content: -0-radial-gradient(left bottom, farthest-side, #f00, #f99 60px, #005):; 
/* Firefox 3.6 - 15 */ 
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content: -moz-radial-gradient(left bottom, farthest-side, #f00, #f99 60px, #005); 
从 标准 语法 */ 
content: radial-gradient(farthest-side at left bottom, #f00, #f99 60px, #005); 

} 

</style> 

<div class="div1"></div> 


[localhost oa0/mysite x NN 
© | © localhost8080/mysite/testlhtml 
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图 11.22 设计 渐变 边框 效果 图 11.23 插入 球形 内 容 填充 物 ， 并 显示 边框 效果 | 
3. 定义 列表 图 标 


【示例 3】 本 示例 通过 list-style-image 属性 ， 为 ul 元 素 定义 自 定义 图 标 ， 该 图 标 通过 渐变 特效 进 | 
绘制 ， 从 而 产生 一 种 精致 的 两 色 效 果 ， 演 示 如 图 11.24 所 示 。 


<style type="text/css"> 
ul { list-style-image: linear-gradient(red 50%, blue 50%);} 
</style> 
<u> 
<l>HTIML5</l> 
<l>CSS3</l> 
<li>JavaScript</li> 
<ul> 
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国 Css3 
国 Javascript | 
| 


图 11.24 设计 项 目 符号 效果 


11.4 在 线 练 习 


使 用 CSS3 设计 各 种 网 页 图 像 效 果 ， 以 及 各 种 网 页 背景 图 像 特效 ， 感 兴趣 的 同学 
可 以 扫 码 强化 练习 。 


和 


使 用 CSS3 美化 列表 和 超 链 接 样 式 


在 默认 状态 下 ， 超 链接 文本 显示 为 蓝 色 、 下 画 线 ， 当 鼠标 指针 移 过 链接 对 象 时 显示 为 手 
形 ， 访 问 过 的 超 链接 文本 显示 为 紫色 ; 列表 项 目 缩 进 显 示 ， 并 在 左 侧 显示 项 目 符号 。 在 网 页 
设计 过 程 中 ， 一 般 都 会 根据 个 人 喜好 和 实际 需要 重新 定义 超 链接 和 列表 样式 


【 学 习 重 点 】 


dl 


至 至于 


正确 使 用 动态 伪 类 

能 金 灵 活 设计 符合 页 面 风 格 的 链接 样式 
定义 列表 样式 

能 够 根据 页 面 风格 设计 列表 菜单 样式 
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12.1 设计 超 链接 样式 


下 面 介绍 如 何 使 用 CSS3 设计 超 链 接 的 基本 样式 。 
12.1.1 使 用 动态 伪 类 


在 网 页 设计 中 ， 用 户 可 以 使 用 CSS3 的 动态 伪 类 选择 器 定义 超 链接 的 4 种 状态 样式 。 

回 alink: 定义 超 链接 的 默认 样式 。 

回 ”aivisited: 定义 超 链接 被 访问 后 的 样式 。 

a:hover: 定义 鼠标 指针 移 过 超 链 接 时 的 样式 。 

回 aactive: 定义 超 链接 被 激活 时 的 样式 。 | 

【示例 】 在 下 面 示例 中 ， 定 义 页 面 所 有 超 链接 默认 为 红色 下 画 线 效 果 ， 当 鼠标 指针 经 过 时 显示 为 | 
绿色 下 画 线 效 果 ， 而 当 单 击 超 链接 时 则 显示 为 黄色 下 画 线 效果 , 超 链接 被 访问 过 之 后 显示 为 蓝 色 下 画 | 
线 效 果 ， 演 示 效 果 如 图 12.1 所 示 。 


<style type="text/css"> 
azlink {color: 姓 F0000:/* 红色 */} 上 证 超 链接 默认 样式 */ 
aivisited {color: #0000FF; /* 蓝 色 */} 族 超 链接 被 访问 后 的 样式 所 
a:hover {color: #00FF00; /* 绿色 */} /# 鼠标 指针 经 过 超 链 接 的 样式 */ 
azactive {color: #EFFF00; /* 黄色 */} 上 证 超 链 接 被 激活 时 的 样式 */ 
</style> 
<ul class="pl"> 

<li><a hre 伍 "#" class="al"> 首 页 </a></li> 

<li><a hre 伍 "#" class="a2"> 新 闻 </a></li> 

<li><a hre 伍 "#" class="a3"> 微 博 </a></li> 
</ul> 
<ul class="p2"> 

<li><a hre 舍 "#f" class="al"> 关 于 </a></li> 

<li><a hre 伍 "#" class="a2"> 版 权 </a></li> 

<li><a hre 伍 "#" class="a3"> 友 情 链接 </a></li> 
</ul> 


图 12.1 定义 超 链接 样式 


痊 提示 : 起 链接 的 4 种 状态 样式 的 排列 顺序 是 固定 的 一 般 不 能 随意 调换 。 正确 顺序 是 : link、visited、 
hover 和 active。 
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| 在 下 面 样式 中 ， 当 鼠标 指针 经 过 超 链 接 时 ， 会 先 执行 第 一 行 声 明 ， 但 是 紧 接着 第 三 行 的 声明 会 覆 
， 盖 掉 第 一 行 和 第 二 行 声明 的 样式 ， 所 以 就 无 法 看 到 鼠标 指针 经 过 和 被 激活 时 的 效果 。 
| a.al:hover {color: #00FF00:} 


汪清 | a.al:active {color: #FFFF00;} 
一 一 | a.al:link {color: #FF0000;} 
‘Note a.al:visited {color: #0000FF; } 


在 上 面 代 码 中 ， 通 过 指定 类 型 选择 器 ， 限 定 上 面 4 个 样式 仅 作用 于 包含 al 类 的 超 链接 中 。 
| 当然 , 用 户 可 以 根据 需要 仅 定义 部 分 状态 样式 。 例 如， 当 要 把 未 访问 的 和 已 经 访问 的 链接 定义 成 
| 相同 的 样式 ， 则 可 以 定义 link、hover 和 active 3 种 状态 。 
| a.al:link {color: #FF0000;} 

a.al:hover {color: #00FF00:;} 

a.al:active {color: #FFFF00;} 
| 如 果 仅 希望 超 链 接 显示 两 种 状态 样式 ， 可 以 使 用 a 和 hover 来 定义 。 其 中 ，a 标签 选择 器 定义 a 
| 元 素 的 默认 显示 样式 ， 然 后 定义 鼠标 指针 经 过 时 的 样式 。 
| a {color: #FF0000;} 

a:hover {color: #00FF00:;} 
| 但 是 如 果 页 面 中 包含 锚 记 对 象 ， 将 会 影响 锚 记 的 样式 。 如 果 定 义 如 下 样式 ， 则 仅 影响 超 链 接 未 访 
| 问 时 的 样式 和 鼠标 指针 经 过 时 的 样式 。 
| a:link {color: #FF0000;} 

a:hover {color: #00FF00:} 


“12.1.2 定义 下 画 线 样式 


| 在 设计 超 链接 样式 时 ， 下 画 线 一 直 是 一 个 重要 效果 ， 巧 妙 结合 下 画 线 、 边 框 和 背景 图 像 ， 可 以 设 
| 计 出 很 多 富有 个 性 的 样式 。 例 如 ， 定 义 下 画 线 的 色彩 、 下 画 线 距离 、 下 画 线 长 度 和 对 齐 方式 、 定 制 双 
| 下 画 线 等 。 

| 如 果 用 户 不 喜欢 超 链接 文本 的 下 画 线 样式 ， 可 以 使 用 CSS3 的 text-decoration 属性 进行 清除 。 

a {l* 完全 清除 超 链接 的 下 画 线 效 果 */ 


text-decoration: none; 


} 
| 从 用 户 体验 的 角度 考虑 ， 在 取消 默认 的 下 画 线 之 后 ， 应 确保 浏览 者 可 以 识别 所 有 超 链接 ， 如 可 以 
， 使 用 加 粗 显 示 、 变 色 、 缩 放 、 高 亮 背景 等 功能 。 也 可 以 设计 当 鼠 标 指 针 经 过 时 增加 下 画 线 ， 因 为 下 画 
| 线 具有 很 好 的 提示 作用 。 


ahover {/* 鼠标 指针 经 过 时 显示 下 画 线 效果 */ 
text-decoration:underline; 


} 

下 画 线 样式 不 仅仅 可 以 是 一 条 实 线 ， 还 可 以 根据 需要 自 定义 设计 ， 主 要 设计 思路 如 下 。 

回 ”借助 <a> 标 签 的 底 边 框 线 来 实现 。 

回 ”利用 背景 图 像 来 实现 ， 背 景 图 像 可 以 设计 出 更 多 精巧 的 下 画 线 样式 。 

【示例 1】 下 面 示例 设计 当 鼠 标 指针 经 过 超 链 接 文本 时 ， 显 示 为 下 画 虚线 、 字 体 加 粗 、 色 彩 高 亮 
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的 效果 ， 如 图 12.2 所 示 。 | 
<style type="text/css"> | 


a {/* 超 链接 的 默认 样式 */ 
text-decoration: none; 庆 清除 超 链接 下 画 线 */ 会 内 
color: #999:; 人/# 浅 灰色 文字 效果 */} ~ 
a:hover {/* 鼠标 指针 经 过 时 样式 */ 
border-bottom: dashed lpx red; /* 鼠标 指针 经 过 时 显示 虚 下 画 线 效果 */ | Note 
color: #000; 谨 加 重 颜色 显示 */ | 
font-weight: bold; 店 加 粗 字 体 显示 */ | 
zoom 1; # 解决 正 浏览 器 无 法 显示 问题 */ | 
} | 
</style> | 
<ul class="p1"> | 


<li><a hre 人 ="#" class="a1"> 首 页 </a></li> 

<li><a hre 伍 "#" class="a2"> 新 闻 </a></li> | 
<li><a hre 人 ="#" class="a3"> 微 博 </a></li> | 

<lu> 
【示例 2】 也 可 以 使 用 CSS3 的 border-bottom 属性 定义 超 链接 文本 的 下 画 线 样式 。 下 面 示例 定义 | 

超 链接 始终 显示 为 下 画 线 效 果 ， 并 通过 颜色 变化 来 提示 鼠标 指针 经 过 时 的 状态 变化 ， 效 果 如 图 12.3 | 
所 示 。 


3 


<style type="text/css"> | 
a {l* 超 链接 的 默认 样式 */ | 
text-decoration: none; 此 清除 超 链接 下 画 线 */ | 
border-bottom: dashed 1px red; 全 红色 虚 下 画 线 效果 */ | 
color: #666; 伴 灰色 字体 效果 所 | 
Zoom: 1; 庆 解决 正 浏览 器 无 法 显示 问题 */ | 
} | 
a:hover {/* 鼠标 指针 经 过 时 样式 */ | 
color: #000; # 加 重 颜色 显示 */ | 
border-bottom: dashed 1px #000; 语 改变 虚 下 夯 线 的 颜色 */ | 
| 
</style> | 


x 
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图 12.2 定义 下 画 线 样式 图 12.3 定义 下 画 线 样式 | 


【示例 3】 使 用 CSS3 的 background 属性 可 以 借助 背景 图 定义 更 精致 、 个 性 的 下 画 线 样式 。 | 
(1) 使 用 Photoshop 设计 一 个 虚线 (images/dashed.psd)， 设 计 图 像 高 度 为 1 像素 ， 宽 度 为 4 像 
素 、6 像素 或 8 像素 。 有 具体 宽度 可 根据 虚线 的 疏 密 确定 。 | 
(2) 在 Photoshop 中 ， 选 择 颜 色 以 跳 格 方式 进行 填充 ， 最 后 保存 为 GIF 格式 图 像 。 | 
(3) 把 示例 2 另存 为 test3.html， 使 用 背景 图 代 蔡 “border-bottom:dashed lpx red:” 声 明 ， 主 要 样 ， 
式 代码 如 下 。 . 
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<style type="text/css"> 

a {l* 超 链接 的 默认 样式 */ 
text-decoration: none; /* 清除 超 链接 下 画 线 */ 
color: #666; 话 灰色 字体 效果 所 


} 

a:hover {/* 鼠标 指针 经 过 时 样式 */ 
color: #000; 谍 加 重 颜 色 显示 */ 
必 定义 背景 图 像 ， 定 位 到 超 链接 元 素 的 底部 ， 并 沿 x 轴 水 平平 铺 */ 
background:url(images/dashed1 .gif) left bottom repeat-x; 

} 

</style> 


(4) 在 浏览 器 中 预览 ， 效 果 如 图 12.4 所 示 。 


图 12.4 背景 图 像 设 计 的 下 画 线 样式 


本 节 通 过 示例 介绍 如 何 为 超 链接 文本 设计 立体 视觉 效果 。 其 方式 主要 是 借助 边框 颜色 的 深浅 错 

模拟 一 种 凸凹 变化 的 立体 效果 。 

设计 技巧 如 下 。 

回 ”设置 右边 框 和 底 边框 同色 ， 同 时 设置 项 边框 和 左边 框 同色 ， 利 用 明暗 色彩 的 搭配 来 设计 立体 
效果 。 

回 ”设置 超 链接 文本 的 背景 色 为 深 色 效果 ， 营 造 凸 起 效果 ， 当 鼠标 指针 移 过 时 ， 再 定义 浅 色 背 景 
来 营造 目下 效果 。 

回 “为 网 页 设计 浅 色 背景 ， 再 定义 字体 颜色 来 烘托 立体 样式 。 

【示例 】 在 这 个 示例 中 定义 超 链接 在 默认 状态 下 显示 灰色 右边 和 底 边 框 线 效果 、 白 色 项 边 和 左边 


框 线 效果 。 而 当 鼠 标 指针 移 过 时 ， 则 清除 右 侧 和 底部 边框 线 ， 并 定义 左 侧 和 顶部 边框 效果 ， 演 示 效 果 
| 如 图 12.5 所 示 。 


<style type="text/css"> 

body { background:#fec: } /# 浅 色 网 页 背景 */ 

ul {list-style-type: none; } 人 # 清除 项 目 符号 */ 

li { margin: 0 2px; float: left:} /# 并 列 显示 */ 

a {lt 超 链接 的 默认 样式 */ 
text-decoration: none; /# 清除 超 链接 下 画 线 */ 
border: solid 1px; 翌 定义 1 像素 实 线 边 框 */ 
padding: 0.4em 0.8em: 上 # 增加 超 链接 补 白 */ 
color: #444:; 庆 定义 灰色 字体 */ 
background: #99; 证 超 链接 背景 色 */ 
border-color: #fff #aaab9c #aaab9c #HTEE 庆 分 配 边框 颜色 所 
Zoom:1: 诺 解决 正 浏 览 器 无 法 显示 问题 */ 
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a:hover {/* 鼠标 指针 经 过 时 样式 */ 


color: #800000: 此 超 链 接 字体 颜色 */ | 
background: transparent; 让 清除 超 链 接 背 景色 */ | 
border-color: #aaab9c #ffF #ffF #aaab9c; 颇 分 配 边框 颜色 */ | 
} | Hb/ 
</style> | 全 一 


等 napyocahosesl ~ SC Soc 


图 12.5 定义 立体 样式 | 
12.1.4 定义 光标 样式 


在 默认 状态 下 ， 鼠 标 指针 经 过 超 链 接 时 显示 为 手 形 。 使 用 CSS 的 cursor Rta 本 频 讲解 
效果 ，cursor 属性 定义 鼠标 移 过 对 象 时 的 指针 样式 ， 取 值 说 明 如 表 12.1 所 示 。 


表 12.1 cursor 属性 取 值 说 明 


取 值 说 了 明 
auto 基于 上 下 文 决定 应 该 显示 什么 光标 
crosshair 十 字 线 光标 (+) 
default 基于 平台 的 默认 光标 。 通 常 泻 染 为 一 个 箭头 
pointer 指针 光标 ， 表 示 一 个 超 链接 
move 十 字 箭 头 光标 ， 用 于 标示 对 象 可 被 移动 


e-resize 、ne-resize 、nw-resize 、n-resize 、 | 表示 正在 移动 某 个 边 , 如 se-resize 光标 用 来 表示 框 的 移动 开始 于 


Se-Iesize、SW-Iesize、S-Iesize、W-IesiZe 东南 角 


text 表示 可 以 选择 文本 。 通 常 泻 染 为 I 形 光 标 

wait 表示 程序 正 忙 ， 需 要 用 户 等 待 ， 通 常 泻 染 为 手表 或 沙漏 

help 光标 下 的 对 象 包 含有 帮助 内 容 , 通常 泻 染 为 一 个 问号 或 一 个 气球 
<uri>URL 自 定义 光标 类 型 的 图 标 路 径 


如 果 自 定义 光标 样式 。 使 用 绝对 或 相对 URL 指定 光标 文件 (后 级 为 .cur 或 者 .ani)。 | 
【示例 】 下 面 示例 在 内 部 样式 表 中 定义 多 个 鼠标 指针 类 样式 , 然后 为 表格 单元 格 应 用 不 同 的 类 样 
式 ， 完 整 代码 可 以 参考 本 节 示 例 源 代码 ， 示 例 演示 效果 如 图 12.6 所 示 。 | 


<style> 

.auto { cursor: auto; } 
.default { cursor: default: } | 
.none { cursor: none; } | 
.context-menu { cursor: context-menu: } | 
erp corsor Pep | 
.pointer { cursor: pointer; } | 
.progress { cursor: progress; } | 
-Wait { cursor: wait; } | 
.Cell { cursor: cell; } | 
.Crosshair { cursor: crosshair; } 人 


RT 
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.text { cursor: text; } 

.vertical-text { cursor: vertical-text; } 
.alias { cursor: alias; } 

.COPY { cursor: copy; } 

.move { cursor: move; } 

.no-drop { cursor: no-drop; } 
.not-allowed { cursor: not-allowed; } 
.e-resize { cursor: e-resize; } 

| .Dh-resize { cursor: n-resize; } 

| .ne-resize { cursor: ne-resize; } 
.DW-Iesize { cursor: nw-resize; } 
.S-resize { cursor: s-resize; } 
.Se-resize { cursor: se-resize; } 
.SW-resize { cursor: sw-resize; } 
.W-resize { cursor: w-resize; } 
.ew-resize { cursor: ew-resize; } 
.ns-resize { cursor: ns-resize; } 
.nesw-resize { cursor: nesw-resize; } 
.nWse-resize { cursor: nwse-resize; } 
.Col-resize { cursor: col-resize; } 
TOW-resize { cursor: row-resize; } 
.all-scroll { cursor: all-scroll; } 
.Zoom-in { cursor: zoom-in; } 
.Zoom-out { cursor: zoom-out; } 

.ur] { cursor: url(skin/cursor.gif), url(skin/cursor.png), url(skin/cursor.jpg), pointer; } 
</style> 


| CE B he/ /ocalhosvtest himl ~ BO| Bocahost 
| cursor 光标 类 型 
default context-menu help 


cel 中 ii vertical-text 


move no-drop not-allowed n-resize nwresize 


S-Tesize se-resize Sw-resize ew-resize nesw-resize 


nWse-resize col-resize ToW-Tesize Url Zoom-out 


图 12.6 比较 不 同 光标 样式 效果 


Wn 


， 浴 提示 : 使 用 自 定义 图 像 作为 光标 类 型 ，IE 和 Opera 等 浏览 器 只 支持 *.cur 等 特定 的 图 片 格式 ; 而 
Firefox、Chrome 和 Safari 等 浏览 器 既 支 持 特定 图 片 类 型 ,也 支持 常见 的 *.jpg、*.gif、*.jpg 
等 图 片 格式 。 
cursor 属性 值 可 以 是 一 个 序列 ， 当 用 户 端 无 法 处 理 第 一 个 图 标 时 ， 它 会 尝试 处 理 第 二 个 、 第 三 个 
”等 ， 如 果 用 户 端 无 法 处 理 任何 定义 的 光标 ， 它 必须 使 用 列表 最 后 的 通用 光标 。 例 如 ， 下 面 样式 中 就 定 
| 义 了 3 个 自 定义 动画 光标 文件 ， 最 后 定义 了 一 个 通用 光标 类 型 。 
ahover { cursor:url(images/1.ani’), url(images/1. cur), url(images/1.gif), pointer:} 
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12.2 设计 列表 样式 


下 面 介绍 如 何 使 用 CSS3 设计 列表 的 基本 样式 。 
12.2.1 定义 项 目 符号 类 型 
使 用 CSS3 的 lististyle-type 属性 可 以 定义 列表 项 目 符号 的 类 型 ， 也 可 以 取消 项 目 符号 ， 该 属性 取 | 


值 说 明 如 表 12.2 所 示 。 神 
表 12.2 list-style-type 属性 值 

属 性 值 属 性 值 说 了 明 
disc upper-roman 写 罗 马 数字 
circle lower-alpha 小 写 英文 字母 
square upper-alpha 大 写 英文 字母 
decimal none, 不 使 用 项 目 符号 
lower-roman armenian 传统 的 亚美尼亚 数字 
cjk-ideographic georgian 传统 的 乔治 数字 
lower-greek 基本 的 希腊 小 写字 母 hebrew 传统 的 希 伯 莱 数字 
hiragana hiragana-iroha 日 文平 假名 序号 
katakana katakana-iroha 日 文 片 假名 序号 
lower-latin 小 写 拉丁 字母 upper-latin 大 写 拉丁 字母 


使 用 CSS3 的 list-style-position 属性 可 以 定义 项 目 符号 的 显示 位 置 。 该 属性 取 值 包括 outside 和 
inside, 其 中 outside 表示 把 项 目 符号 显示 在 列表 项 的 文本 行 以 外 , 列表 符号 默认 显示 为 outside; inside | 
表示 把 项 目 符号 显示 在 列表 项 文本 行 以 内 。 | 


< 注意 : 如 果 要 清除 列表 项 目的 缩 进 显示 样式 ， 可 以 使 用 下 面 样式 实现 。 


ulLol{ 
padding: 0; 
margin: 0; 
出 
【示例 】 下 面 示例 定义 项 目 符号 显示 为 空心 贺 ， 并 位 于 列表 行内 部 显示 ， 如 图 12.7 所 示 。 
<style type="text/css"> 
body {/* 清除 页 边 距 */ 
margin: 0; /# 清除 边界 */ | 
padding: 0; 庆 清除 补 白 所 | 
} | 
Te 列表 基本 样式 */ | 
list-style-type: circle: 上 # 空心 圆 符 号 */ | 
list-style-position: inside: 上 # 显示 在 里 面 */ | 
} | 
</style> | 
<u> | 
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<li><a hre 伍 "#"> 关 于 我 们 </a></li> 
<li><a hre 伍 "#" > 版 权 信息 </a></li> 
<li><a href="#'> 友 情 链 接 </a></li> 
2 | </ul> 
全 网 | 6G15 


图 12.7 定义 列表 项 目 符号 


”六 提示 : 在 定义 列表 项 目 符号 样式 时 ， 应 注意 下 面 两 点 . 

| 第 一 ， 不 同 浏览 器 对 于 项 目 符号 的 解析 效果 ， 以 及 其 显示 位 置 略 有 不 同 。 如 果 要 兼容 不 同 
浏览 器 的 显示 效果 ， 应 关注 这 些 差异 。 
第 二 ,项 目 符号 显示 在 里 面 和 外 面 会 影响 项 目 符号 与 列表 文本 之 间 的 距离 ， 同 时 影响 列表 
项 的 缩 进 效果 。 不 同 浏览 器 在 解析 时 会 存在 差异 。 


”12.2.2 ”定义 项 目 符号 图 像 
| 使 用 CSS3 的 list-style-image 属性 可 以 自 定义 项 目 符号 。 该 属性 允许 指定 一 个 外 部 图 标 文件 ， 以 
此 满足 个 性 化 设计 需求 ， 用 法 如 下 所 示 。 
| list-style-image:none | <url> 


默认 值 为 none。 
【示例 】 以 12.2.1 节 示 例 为 基础 ， 重 新 设计 内 部 样式 表 ， 增 加 自 定义 项 目 符号 ,设计 项 目 符号 为 


外 部 图 标 bullet_main_02.gif， 效 果 如 图 12.8 所 示 。 


<style type="text/css"> 

书 {l* 列表 基本 样式 */ 
list-style-type: circle; /# 空心 圆 符号 */ 
list-style-position: inside; /# 显示 在 里 面 */ 
list-style-image: url(images/bullet_ main_02.gif); 。 “/* 自 定义 列表 项 目 符号 所 

} 

</style> 


图 12.8 自 定义 列表 项 目 符号 


， 记 提示 ， 当 同时 定义 项 目 符号 类 型 和 自 定义 项 目 符号 时 ， 自 定义 项 目 符号 将 禾 盖 默认 的 符号 类 型 。 
但 是 如 果 list-style-type 属性 值 为 none 或 指定 外 部 的 图 标 文件 不 存在 时 ， 则 list-style-type 
属性 值 有 效 。 
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12.2.3 ”模拟 项 目 符号 


使 用 CSS3 的 background 属性 也 可 以 模拟 列表 项 目的 符号 ， 设 计 技 巧 如 下 。 
(1) 使 用 list-style-type:none 隐藏 列表 的 默认 项 目 符号 。 
(2) 使 用 background 属性 为 列表 项 目 定义 背景 图 像 ， 精 确定 位 其 显示 位 置 。 
(3) 同时 使 用 padding-left 属性 为 列表 项 目 定义 左 侧 空白 ， 避 免 背 景 图 被 项 目 文本 遮盖。 | 
【示例 】 在 下 面 这 个 示例 中 ， 先 清除 列表 的 默认 项 目 符号 ,然后 为 项 目 列表 定义 背景 图 像 ， 并 定 | 
位 到 左 侧 垂直 居中 的 位 置 ， 为 了 避免 列表 文本 覆盖 背景 图 像 ， 定 义 左 侧 补 白 为 一 个 字符 宽度 ， 这 样 就 | 
可 以 把 列表 信息 向 右 方向 缩 进 显示 ， 显 示 效 果 如 图 12.9 所 示 。 | 
<style type="text/css"> 
ut{l* 清除 列 默认 样式 */ 
list-style-type: none; 
padding: 0; 
margin: 0; 


} 
li {局 定义 列表 项 目的 样式 */ 
background-image: url(images/bullet_sarrow.gif); 。 /* 定义 背景 图 像 */ 


background-position: left center; 人 # 精确 定位 背景 图 像 的 位 置 */ 
background-repeat: no-repeat; 必 禁止 背景 图 像 平 铺 显示 */ 
padding-left lem:; 让 为 背景 图 像 挤 出 空白 区 域 */ 
1 
</style> 


x 
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图 12.9 使 用 背景 图 模拟 项 目 符号 


123 案例 实战 


下 面 通过 多 个 案例 演示 如 何在 具体 页 面 中 设计 超 链接 和 列表 的 样式 。 
12.3.1 设计 图 形 按钮 链接 


超 链接 可 以 显示 为 多 种 样式 ,如 动画 、 按钮 、 图 像 、 特 效 等 ， 本 节 介 绍 如 何 设计 图 形 化 按钮 样式 。 | 册 二 
设计 方法 : 使 用 CSS 的 background-image 属性 实现 。 | 
【示例 1】 下 面 示例 通过 背景 图 像 蔡 换 超 链接 文本 ， 设 计 图 形 按钮 效果 ， 如 图 12.10 所 示 。 
<style type="text/css"> 
areg { /* 超 链接 样式 */ 
background: transparent url('images/btn2.gif) no-repeat top left; /* 背景 图 像 */ 
display: block:; 诺 块 状 显示 ， 方 便 定义 宽度 和 高 度 */ 
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width:74px: 店 宽度 ， 与 背景 图 像 同 宽 */ 
height: 25px; 让 高 度 ， 与 背景 图 像 同 高 */ 
| text-indent:-999px; 上 证 隐藏 超 链接 中 的 文本 */ 
.| 
仿生 | </style> 
Note | <a class="reg" href="#"> 注 册 </a> 


| 在 上 面 代 码 中 ， 使 用 background-repeat 属性 防止 背景 图 重复 平 铺 ; 定义 <a> 标 签 以 块 状 或 者 行内 
块 状 显示 ， 以 方便 为 超 链 接 定义 高 和 宽 ; 在 定义 超 链接 的 显示 大 小 时 ， 其 宽 和 高 最 好 与 背景 图 像 保持 
| 一致， 也 可 以 使 用 padding 属性 撑 开 <a> 标 签 ， 以 代替 width 和 height 属性 声明 ; 使 用 text-indent 属性 


| 隐藏 超 链接 中 的 文本 。 
4 注意 : 如 果 超 链接 区 域 比 背景 图 大 ， 可 以 使 用 background-position 属性 定位 背景 图 像 在 超 链接 中 
| 的 显示 位 置 。 


| 【示例 2〗】 下 面 示例 为 超 链接 不 同 状态 定义 不 同 背景 图 像 : 当 在 正常 状态 下 ， 超 链接 左 侧 显示 一 
个 箭头 式 的 背景 图 像 ， 当 鼠标 指针 移 过 超 链接 时 ， 背 景 图 像 被 替换 为 另 一 个 动态 GIF 图 像 ， 使 整个 超 
| 链接 动态 效果 立即 显示 出 来 ， 演 示 效 果 如 图 12.11 所 示 。 


<style type="text/css"> 

aeg {/* 定义 超 链接 正常 样式 : 定位 左 侧 背 景 图 像 */ 
background: url("images/arrow2.gif") no-repeat left center: 
padding-left:14px; 

} 

a.reg:hover {/* 定义 鼠标 指针 经 过 时 超 链接 样式 ， 定 位 左 侧 背 景 图 像 */ 
background: url("images/arrow1.gif") no-repeat left center: 
padding-left:14px; 

} 

</style> 

<a class="reg"” hre 伍 "#"> 注 册 </a> 
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图 12.10 图 形 化 按钮 样式 图 12.11 动态 背景 样式 


在 上 面 代码 中 ， 通 过 padding-lef 属性 定义 超 链接 左 侧 空隙 ， 这 样 就 可 以 使 定义 的 背景 图 像 显示 
， 出来， 避免 被 链接 文本 所 中 盖 。 实 战 中 ， 经 常 需要 使 用 padding 属性 来 为 超 链接 增加 空余 的 空间 ， 以 
， 便 背景 图 像 能 够 很 好 地 显示 出 来 。 


12.3.2 ”设计 背景 滑动 样式 
| 使 用 CSS 滑动 门 技术 可 以 设计 宽度 可 伸缩 的 超 链 接 样式 。 所 谓 滑 动 门 ， 就 是 通过 两 个 背景 图 像 
| 的 个 加， 以 创造 一 些 可 自由 伸缩 的 背景 效果 。 


【操作 步骤 】 
(1) 使 用 Photoshop 设计 好 按钮 图 形 的 效果 图 ， 然 后 分 切 为 两 截 ， 其 中 一 截 应 尽 可 能 的 窗 ， 只 
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包括 一 条 椭圆 边 , 另 一 截 可 以 尽 可 能 大 , 这 样 设计 的 图 按钮 就 可 以 容纳 更 多 的 字符 , 如 图 12.12 所 示 


图 12.12 绘制 并 裁 切 滑动 门 背 景 图 | 

(2) 启动 Dreamweaver， 新 建 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 输入 以 下 代码 。 构 建 一 | 

个 可 以 定义 重 芝 背景 图 的 超 链接 结构 ， 具 体 结构 如 下 ， 在 每 个 超 链 接 <a> 标 签 中 包含 了 一 个 pi 和 | 
助 标签 。 


个 


href="#"><span> 按 钮 </span></a> 

hre 伍 "#"><span> 超 链接 </span></a> 
href="#"><span> 图 像 按钮 </span></a> 
href="#"><span> 扩 展 性 按钮 </span></a> 
href="#"><span> 能 够 定义 很 多 字数 的 文本 链接 </span></a> 


(3) 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 一 个 内 部 样式 表 , 然后 输入 下 面 样式 。 
使 用 CSS 把 短 的 背景 图 (leftl.gip) 固定 在 <a> 标 签 的 左 侧 。 


a {/* 定义 超 链 接 样 式 */ 
background: url(images/left] .gif) no-repeat top left; 让 把 短 截 背景 图 像 固定 在 左 侧 */ 


a 4 
a | 
<a 
<a 


display: block: 人 # 以 块 状 显 示 ， 这 样 能 够 定义 大 小 */ | 
float:left; 族 浮动 显示 ， 这 样 a 元 素 能 够 自动 收缩 宽度 ， 以 正好 包容 文本 */ | 
padding-left: 8px; 上 # 增加 左 侧 内 边 距 ， 该 宽度 正好 与 上 面 定 义 的 背景 图 像 同 宽 */ | 
font: bold 13px Arial; /# 超 链接 文本 字体 属性 */ | 
line-height: 22px: 上 # 定义 行 高 所 | 
height: 30px; 旋 定义 按钮 高 度 */ 
color: white; 上 旋 字体 颜色 */ 
margin-left:6px; 此 左 侧 外 边框 */ | 
text-decoration:none; 庆 清除 默认 的 下 画 线 样式 */ | 
) 
(4) 把 长 的 背景 图 (rightl.gif) 固定 在 <span> 标 签 的 右 侧 。 | 
aspan { | 
background: url('images/right1.gif) no-repeat top right; 。 /* 定义 长 截 背 景 图 像 */ | 
display: block: /# 块 状 显示 *#/ | 
padding: 4px 10px 4px 2px; 谍 增加 内 边 距 */ | 
} | 


(5) 在 浏览 器 中 预览 ， 显 示 效 果 如 图 12.13 所 示 。 如 果 希 望 鼠标 指针 经 过 时 让 背景 图像 的 色彩 | | 
稍 有 变化 ， 增 加 按钮 的 动态 感 ， 不 妨 给 鼠标 指针 经 过 时 增加 一 个 下 画 线 效果 。 | 


a:hover { text-decoration: underline;} 


图 12.13 设计 滑动 门 链接 效果 | 
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12.3.3 设计 背景 交换 样式 


各 本 例 设计 两 幅 大 小 相同 、 效 果 不 同 的 背景 图 像 ， 然 后 使 用 CSS 进行 轮换 显示 ， 设 计 一 种 简单 的 
鲍 汪 鼠标 动画 效果 。 


| 【操作 步骤 】 
(1) 使 用 Photoshop 设计 两 幅 大 小 相同 ， 但 效果 略 不 同 的 图 像 ， 如 图 12.14 所 示 。 
(2) 启动 Dreamweaver， 新 建 网 页 ， 保 存 为 testLhtml， 在 <body> 标 签 内 输入 以 下 代码 。 构 建 一 
个 列表 结构 。 
| a 


| <li><a hre 伍 "#"> 首 页 </a></li> 
<li><a hre 伍 "#"> 新 闻 </a></li> 
<li><a hre 伍 "#"> 微 博 </a></li> 
</ul> 
(3) 在 <head> 标 签 内 添加 <style type="textcss"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 。 


a {l* 超 链接 的 默认 样式 所 


text-decoration:none; * 清除 默认 的 下 画 线 */ 
display:inline-block; 谨 行内 块 状 显示 */ 

padding:2px lem:; /# 为 文本 添加 补 白 效 果 */ 

height:28px; /# 固定 高 度 */ 

line-height:32px; 谍 行 高 等 于 高 度 ， 设 计 垂直 居中 */ 
text-align:center; 谍 文本 水 平 居中 类 
background:url(images/b1.gif) no-repeat center; /* 定义 背景 图 像 1， 禁 止 平 铺 ， 居 中 */ 
color:#ccc; 人 # 浅 灰 色 字体 */ 


{l* 鼠标 指针 经 过 时 样式 */ 
background:url(images/b2.gif) no-repeat center; /* 定义 背景 图 像 2， 禁 止 平 铺 ， 居 中 */ 
color-#ffF; 此 白色 字体 */ 
} 
在 上 面 样式 代码 中 ， 先 定义 超 链接 以 行内 块 状 显示 ， 这 样 便于 控制 它 的 宽 和 高 ， 然 后 根据 背景 图 
像 大 小 定义 a 元素 的 大 小 ， 并 分 别 为 默认 状态 和 鼠标 指针 经 过 状态 下 定义 背景 图 像 。 
对 于 背景 图 来 说 ， 超 链接 的 宽度 可 以 不 必 等 于 背景 图 的 宽度 ， 只 要 小 于 背景 图 的 宽度 即 可 。 但 是 
高 度 必 须 保 持 与 背景 图 像 的 高 度 一 致 。 在 设计 中 可 以 结合 背景 图 像 的 效果 定义 字体 颜色 。 
(4) 在 浏览 器 中 预览 ， 所 得 的 超 链接 效果 如 图 12.15 所 示 。 


| ”| BS rpyocanhosren -ac 


| bgl.gif 
| bg2.gif 
图 12.14 设计 背景 图 像 图 12.15 背景 图 交换 链接 效果 


， 洲 提 示 : 为 了 减少 两 乙 背 丸 因 像 的 HTTP 请 求 次 数 ， 过 锡 占 用 不 必要 的 带宽 。 可 以 把 交换 的 两 幅 图 
| 像 合并 为 一 幅 图 像 ， 然 后 利用 CSS 定位 技术 控制 背景 图 的 显示 区 域 。 
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12.3.4 设计 垂直 滑动 菜单 


本 节 介绍 背景 图 像 的 垂直 交换 样式 ,但 是 单纯 的 垂直 滑动 存在 一 个 弱点 : 如 果菜 单项 字数 不 同 ( 菜 es 
单项 宽度 不 同 )， 那 么 就 需要 考虑 为 不 同 宽度 的 菜单 项 设计 背景 图 ， 这 样 就 比较 麻烦 。 解 决 方法 : 将 。 图] 
水 平和 垂直 滑动 融合 在 一 起 ， 设 计 菜 单项 能 自由 适应 高 度 和 宽度 的 变化 效果 。 

【操作 步骤】 Xte 

(1) 设计 背景 图 ， 如 图 12.16 所 示 。 然 后 两 幅 背景 图 拼合 在 一 起 ， 形 成 滑动 的 门 ， 如 图 12.17 | 
所 示 。 | 


= 
图 12.16 设计 滑动 背景 图 图 12.17 拼合 滑动 背景 图 
(2) 完善 HTML 结构 ， 在 超 连 接 (<a>) 内 再 包裹 一 层 标签 (<span>)。 启 动 Dreamweaver, 新 | 
建 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 编写 如 下 列表 结构 。 
<hl> 滑 动 门 <hl> 
<ul id="menu"> 
<li><a hre 伍 "#" title=""><span> 首 页 </span></a></li> 
<li><a hre 伍 "#" title=""><span> 微 博 圈 </span></a></li> 
<li><a hre 伍 "#" title=""><span> 移 动 开发 </span></a></li> 
<li><a hre 伍 "#" title=""><span> 编 程 与 设计 </span></a></li> 
<li><a hre 伍 "#"' tile=""><span> 程 序 员 与 语言 </span></a></li> 
<li><a href="#" title=""><span> 编 程 语 言 排行 榜 </span></a></li> 
</ul> 


(3) 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 ， 准 备 编写 样式 。 
(4) 设计 CSS 样式 代码 ， 可 根据 12.3.3 节 示例 样式 代码 ， 把 <li> 标 签 的 的 背景 样式 转 给 <span> 
标签 即 可 ， 详 细 代码 如 下 。 


#menu {/* 定义 列表 样式 */ 


background: url(images/bg1.gif) #HEE /#* 定义 导航 菜单 的 背景 图 像 */ 
padding-left: 32px: * 定义 左 侧 的 补 白 */ 
margin: Opx; /# 清除 边界 */ 
list-style-type: none; /# 清除 项 目 符号 *#/ 
height:35px:; 旋 固定 高 度 ， 否 则 会 自动 收缩 为 0*/ 
} 
#menu li {/* 定义 列表 项 样式 */ 
float: left: 庆 向 左 浮动 *#/ 
margin:0 4px: 产 增加 菜单 项 之 间 的 距离 */ | 
} | 
#menu span {/* 定义 超 链接 内 包含 元 素 span 的 样式 */ | 
float:left: /# 向 左 浮动 */ | 
padding-left:18px; 上 # 定义 左 补 白 ， 避 免 左 侧 被 覆盖 */ | 
background:url(images/menu4.gif) left center repeat-x; 。“/* 定义 背景 图 ， 并 左 对 齐 */ | 
| 


#menu lia {/* 定义 超 链接 默认 样式 */ 
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padding-right: 18px: 庆 定义 右 补 白 ， 与 左 侧 形成 对 称 */ 
| float: left; 谍 向 左 浮动 */ 
| height: 35px: /# 固定 高 度 地 
| color: #bbb; 上 # 定义 百分比 宽度 ， 实 现 与 上 同 宽 */ 
供 | line-height: 35px:; 旋 定义 行 高 ， 间 接 实现 垂直 对 齐 */ 
一 一 | text-align: center; /# 定义 文本 水 平 居中 */ 
Note text-decoration: none; 放 清除 下 画 线 效果 */ 


background:url(images/menu4.gif) right center repeat-x; ” /* 定义 背景 图 像 */ 


} 

##menu li a:hover {/* 定义 鼠标 指针 经 过 超 链接 的 样式 */ 

| text-decoration:underline: 诊 定义 下 画 线 */ 
| color: #TEF 庆 白色 字体 所 
3 


(5) 步骤 (4) 的 样式 代码 仅 完成 了 水 平滑 动 效果 ， 下 面 需要 修改 部 分 样式 ， 设 计 当 鼠标 指针 经 
， 过 时 的 滑动 效果 ， 把 如 下 样式 
”menu liaihover {/* 定义 鼠标 指针 经 过 超 链接 的 样式 志 


##menu a:hover span {/* 定义 鼠标 指针 经 过 超 链接 的 样式 */ 
background:url(images/menu5.gif) left center repeat-x; 。“/* 定义 滑动 后 的 背景 图 像 */ 
cursor:pointer; 证 定义 鼠标 指针 经 过 时 显示 手 形 指针 */ 
cursor:hand: 谍 早期 正版 本 下 显示 为 手 形 指针 */ 


(6) 保存 页 面 之 后 ， 在 浏览 器 中 预览 ， 演 示 效 果 如 图 12.18 所 示 。 


| text-decoration:underline; 人 # 定义 下 画 线 *#/ 

| color: HE 人/ 白色 字体 所 

| 本 村 

| 修改 为 如 下 的 样式 。 

| menuahover {/* 定义 鼠标 指针 经 过 超 链接 的 样式 * 

| color: #fff: 让 白色 字体 所 

| background:url(images/menu5.gif) right center repeat-x; ” /* 定义 滑动 后 的 背景 图 像 */ 
| } 


图 12.18 水平 与 垂直 滑动 菜单 


容 提示 : 如 果 使 用 CSS3 动画 技术 ,添加 如 下 两 个 样式 ， 可 以 更 通 真 地 演示 重 直 滑动 的 动画 效果 
( test3.html ) ， 相 关 技 术 的 详细 讲解 可 以 参考 后 面 章节 内 容 。 
#menu span { transition: all .3s ease-in;} 
#menu li a { transition: all .3s ease-in;} 
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12.4 在 线 练 习 


Note 


本 节 通 过 大 量 案例 练习 HTML5 列表 和 超 链 接 的 样式 设计 ， 感 兴趣 的 同学 可 以 扫 码 强化 基本 功 
训练 。 


[ey r 
在 线 练习 2 
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前 面 章节 曾经 介绍 了 表格 和 表单 的 结构 ， 本 章 主要 介绍 如 何 使 用 CSS 控制 表格 和 表单 
的 显示 效果 ， 如 表格 的 边框 和 背景 ， 表 单 的 边框 和 背景 等 样式 ， 以 及 如 何 设 计 比较 实用 的 表 
格 和 表单 页 面 


【 学 习 重 点 】 


Ph 
ph 
Ph 
dl 


定义 表格 基本 样式 

能 够 根据 需要 设计 复杂 的 表格 样式 
定义 表格 基本 样式 

能 够 根据 页 面 风格 设计 表格 样式 


第 上 3 章 使用 CSS3 美 化 表格 和 才 单 一 GBI | 


13.1 设计 表格 样式 | 


全 | 
CSS 为 表格 定义 了 5 个 专用 属性 ， 详 细 说 明 如 表 13.1 所 示 。 汪 妆 
Note 
表 13.1 CSS 表格 属性 列表 | 
属 性 取 值 说 明 | 
separate ( 边 分 开 ) | | 定义 表格 的 行 和 单元 格 的 边 是 合并 在 一 起 还 是 按照 标准 的 HTML | 
border-collapse 


collapse ( 边 合并 ) 样式 分 开 | 
定义 当 表 格 边框 独立 (如 当 border-collapse 属性 等 于 separate 时 )， | 
行 和 单元 格 的 边 在 横向 和 纵向 上 的 间距 ， 该 值 不 可 取 负 值 | 


定义 表格 的 caption 对 象 位 于 表格 的 顶部 或 底部 。 应 与 caption 元 素 


border-spacing | length 


caption-side top | bottom 一 起 使 用 
empty-cells show | hide 定义 当 单 元 格 无 内 容 时 ， 是 否 显 示 该 单元 格 的 边框 | 
定义 表格 的 布局 算法 ， 可 以 通过 该 属性 改善 表格 呈 递 性 能 ， 如 果 设 
置 fxed 属性 值 ， 会 使 正 浏览 器 以 一 次 一 行 的 方式 呈 递 表格 内 容 从 
table-layout auto | fixed 


而 提供 给 信息 用 户 更 快 的 速度 ， 如 果 设 置 auto 属性 值 ， 则 表格 在 每 
-单元 格 内 所 有 内 容 读 取 计 算 之 后 才 会 显示 出 来 


除了 表 13.1 介绍 的 5 个 表格 专用 属性 外 ，CSS 其 他 属性 对 于 表格 一 样 适用 。 
13.1.1 定义 边框 样式 


使 用 CSS3 的 border 属性 可 以 定义 表格 边框 。 由 于 表格 中 每 个 单元 格 都 是 一 个 独立 的 对 象 ， 为 它 | EE ee 
们 定义 边框 线 时 ， 相 互 之 间 不 是 紧密 连接 在 一 起 的 。 

使 用 CSS3 的 border-collapse 属性 可 以 把 相 邻 单元 格 的 边框 合并 起 来 ， 相当 于 把 相信 单元 格 连接 ， 
为 一 个 整体 。 该 属性 取 值 包括 separate 〈 单 元 格 边框 相互 独立 ) 和 collapse (单元 格 边 框 相互 合并 )。 

【 示例】 下面 示例 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 
编写 如 下 样式 。 

table {/* 合并 单元 格 边框 */ 
border-collapse: collapse; | 
width: 100%; | 


} 
了 h, td { border: solid 1px #ff0000;} /* 定义 单元 格 边 框 线 为 1 像素 的 细 线 */ 


然后 借助 7.2.4 节 的 示例 表格 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 13.1 所 示 。 


x 
BS oo sc ss >“ 国 吕 i 


hea 
tbody> 


ao i | 
在 天 拒 中 ， 上 还 村 区 民 二 可 过 标签 。 | 
| 
| 


图 13.1 使 用 CSS 定义 单元 格 边框 样式 | 
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13.1.2 ”定义 单元 格 间距 


| 使 用 CSS3 的 border-spacing 属性 可 以 定义 单元 格 间距 。 取 值 包含 一 或 两 个 值 。 当 定义 一 个 值 时 
到 | 则 定义 单元 格 行 间距 和 列 间距 都 为 该 值 ， 例 如 : 


有 记分 隔音 元 格 边框 
| 如 果 分 别 定义 行 间距 和 列 间距 ， 就 需要 定义 两 个 值 ， 例 如 
table { border-spacing:10px 30px:} 人 # 分 隔 单元 格 边框 */ 
| 其中, 第 一 个 值 表示 单元 格 之 间 的 行 间距 ,第 二 个 值 表示 单元 格 之 间 的 列 间距 ,该 属 性 值 不 可 以 
为 负数 。 使 用 cellspacing 属性 定义 单元 格 之 间 的 距离 之 后 ， 该 空间 由 表格 背景 填充 。 
4 注意 ; 使 用 CSS 的 cellspacing 属性 时 ， 应 确保 单元 格 之 间 相 互 独立 性 ， 不 能 使 用 “border-collapse 
| collapse;” 上 声明 合并 表格 的 单元 格 边框 ,也 不 能 够 使 用 CSS 的 margin 属性 来 代替 设计 ， 单 
元 格 之 间 不 能 够 使 用 margin 属性 调整 间距 。 


| 早期 正 浏 览 器 不 支持 该 属性 , 要 定义 相同 效果 的 样式 , 还 需要 结合 传统 <table> 标 签 的 cellspacing 
| 属性 来 设置 。 
| 【示例 】CSS 的 padding 属性 与 HTML 的 cellpadding 属性 功能 相同 。 例 如 ， 下 面 样式 为 表格 单 
| 元 格 定义 上 下 6 像素 和 左右 12 像素 的 补 白 空间 ， 效 果 如 图 13.2 所 示 。 
table {/* 合并 单元 格 边框 */ 

border-collapse: collapse; 

width: 100%; 


} 

th,td{ 
border: solid 1px #ff0000; 
padding: 6px 12px: 

} 


el rr Er 


结构 化 表格 标签 


标签 
<thead> 定义 表 头 结构 。 
<tbody> 定义 表格 主体 结构 。 
<tfoot> 定义 表格 的 页 脚 结构。 
* 在 表格 中 ， 上 述 标 签 属于 可 选 标签 。 


图 13.2 ”增加 单元 格 空隙 
13.1.3 ”定义 标题 位 置 


| 使 用 CSS3 的 caption-side 属性 可 以 定义 标题 的 显示 位 置 ， 该 属性 取 值 包括 top (位 于 表格 上 面 )、 
”bottom〔 位 于 表格 底部 )。 如 果 要 水 平 对 齐 标题 文本 ， 则 可 以 使 用 text-align 属性 。 
【示例 】 以 13.1.2 节 示 例 为 基础 ， 在 下 面 示例 中 定义 标题 在 底部 显示 ， 显 示 如 图 13.3 所 示 。 
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<style type="text/css"> 
table {/* 合并 单元 格 边框 所 
border-collapse: collapse; 


width: 100%:; y 
} 区 
th, td { border: solid 1px #ff0000; } | 自 - 
caption {/* 定义 标题 样式 */ 
caption-side: bottom; /# 底部 显示 *#/ | Note 
margin-top: 10px; /# 定义 左右 边界 *#/ | 
font-size: 18px; /# 定义 字体 大 小 *#/ | 
font-weight: bold; 谍 加 粗 显示 */ | 
color: #666; /# 灰色 字体 */ | 
} | 
</style> | 


名 [5 S et x | 

标签 i 
[<thead> 主义 素 藉 颖 构 。 
[evoody> 储 又 表格 主体 络 柯 。 
[<tfoor> 定义 表格 的 页 脚 结构 。 
上 在 表格 中 ， 上 还 标签 属于 可 选 标签 。 


结构 化 表格 标签 


图 13.3 ”增加 单元 格 空隙 


13.1.4 ”隐藏 空 单元 格 


使 用 CSS3 的 empty-cells 属性 可 以 设置 空白 单元 格 是 否 显示 ，empty-cells 属性 取 值 包括 show 和 和 
hide。 注 意 ， 该 属性 只 有 在 表格 单元 格 的 边框 处 于 分 离 状态 时 有 效 。 | 
【示例 】 继 续 以 13.1.3 节 示 例 为 基础 ， 在 下 面 示例 中 隐藏 页 脚 区 域 的 空 单元 格 边框 线 , 隐藏 前 后 | 
比较 效果 如 图 13.4 所 示 。 | 
<style type="text/css"> 
table {/* 合并 单元 格 边框 */ | 
width: 100%; | 
empty-cells: hide; /# 隐藏 空 单元 格 */ | 


} | 
th, td { border: solid 1px #ff0000; } | 
caption {/* 定义 标题 样式 */ | 


caption-side: bottom; # 底部 显示 */ 

margin-top: 10px: /# 定义 左右 边界 机 

font-size: 18px: /# 定义 字体 大 小 *#/ | 

font-weight: bold: /# 加 粗 显 示 */ | 

color: #666; 诊 灰色 字体 */ | 
} | 
</style> | 


这 提示 : 如 果 单元 格 的 visibility 属性 为 hidden， 即 便 单元 格 包含 内 容 ， 也 认为 是 无 可 视 内 容 ， 即 空 | 
单元 格 。 可 视 内 容 还 包括 “&nbsp:”， 以 及 其 他 空白 字符 。 | 


2 


说 明 说 明 

攻 义 表 头 结构 。 定义 表 头 结构 。 

[ 耳 义 表格 主体 结构 。 y> | 定义 表格 主体 结构 。 

医 义 表格 的 页 脚 结构 。 主义 表格 的 页 脚 结构 。 

在 表格 中 ， 上 述 标 签 属于 可 选 标签 。 “在 表格 中 ， 上 述 标签 属于 可 选 标签。 


结构 化 表格 标签 结构 化 表格 标签 


(a) 隐藏 前 (b) 隐藏 后 
图 13.4 隐藏 空 单元 格 效果 


13.2 设计 表单 样式 


| 表单 没有 独立 的 CSS 属性 ， 适 用 CSS 通用 属性 ， 如 边框 、 背 景 、 字 体 等 样式 。 但 是 个 别 表 单 控 
| 件 比 较 特殊 ， 不 易 使 用 CSS 定制 ， 如 下 拉 菜 单 、 单 选 按钮 、 复 选 框 和 文件 域 。 如 果 完 全 设计 个 性 化 
| 样式 ， 有 时 还 需要 JavaScript 辅助 实现 。 

加 | 


13.2.1 定义 文本 框 样式 


| 使 用 CSS 可 以 对 文本 框 进行 全 面 定制 ,如 边框 、 缘 景 、 补 白 、 大 小 、 字 体 样式 ,以 及 CSS3 圆 角 、 
| 阴影 等 ， 本 节 将 通过 几 个 示例 演示 设计 文本 框 样式 的 基本 方法 。 
| 【示例 1】 启动 Dreamweaver， 新建 一 个 网 页 ， 保 存 为 testl.html， 在 <body> 内 使 用 <form> 标 签 包 
| 含 一 个 文本 框 和 一 个 文本 区 域 。 
| <form> 
<p><label for="user"> 文 本 框 : </label> 
<input type="text" value=" 看 我 的 颜色 " id="user" name="user" /></p> 
<p><label for="text"> 文 本 区 域 ， </label> 
<textarea ”id="text" name="text"> 看 我 背景 </textarea></p> 


</form> 


| 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 表 
| 单 样式 ， 为 文本 框 和 文本 区 域 设置 不 同 的 边框 色 、 字 体 色 、 背 景 图 。 


body { font-size: 14px; } 庆 文本 大 小 所 
input { 
width: 300px: /# 设置 宽度 */ 
height: 25px; 人 # 设置 高 度 *#/ 
font-size: 14px: 上 # 文本 大 小 */ 
line-height: 25px; 庆 设置 行 高 */ 
border: 1px solid #339999; 此 设置 边框 属性 */ 
color: #EfF0000; /# 字体 颜色 */ 
background-color: #99CC66; /# 背景 颜色 */ 
textarea { 
width: 400px; 庆 设置 宽度 所 
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height: 300px:; 
line-height: 24px: 
border: none; 
border: 1px solid #ff7300; 
background: #99CC99 url(images/1.jpg) no-repeat; 
display: block; 
margin-left: 60px; 
} 
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人 # 设置 高 度 所 

# 设置 行 高 *#/ 

上 # 清除 默认 边框 设置 */ 
上 设置 边框 属性 */ 

/# 设置 宽度 所 

/# 背景 颜色 */ 

语 设置 外 间距 */ 


在 上 面 代码 中 ， 定 义 整个 表单 中 字体 大 小 和 输入 域 的 空间 ， 设 置 宽度 和 高 度 ， 输 入 域 的 高 度 和 行 
高 应 一 致 ， 即 方便 实现 单行 文字 垂直 居中 ， 接 着 设置 单行 输入 框 的 边框 在 字体 颜色 和 背景 颜色 的 取 


色 中 ， 一般 反 差 较 大 ， 突 出 文本 内 容 。 


设置 文本 区 域 属性 。 同 样 对 其 宽 高 设置 ， 此 处 设置 它 的 行 高 为 24 像素 ， 实 现行 与 行 的 间距 ， 而 
不 设置 垂直 居中 。 通 过 浏览 器 我 们 发 现 文本 区 域 的 边框 线 有 止 凸 的 感觉 ， 此 时 设置 边框 线 为 0， 并 重 | 


新 定义 边框 线 的 样式 。 文 本 区 域 前 的 输入 内 容 较 多 ， 


可 以 设置 块 元 素 换行 显示 使 文本 输入 全 部 显示 。 | 


通过 浏览 器 发 现 单行 文本 框 和 文本 区 域 左 边 并 没有 对 齐 , 通过 设置 margin-left 属性 来 实现 上 (单行 文 | 
本 框 ) 下 《文本 区 域 的 对 齐 )， 最 后 更 改 文 本 区 域 的 背景 色 和 背景 图 ， 即 整个 表单 样式 设置 完毕 。 


在 正 浏览 器 中 预览 ， 演 示 效 果 如 图 13.5 所 示 。 


【示例 2] 使 用 CSS 设计 表单 对 象 样 式 有 不 同 的 方法 。 以 上 面 示例 1 为 例 , 如 果 使 用 


则 可 以 使 用 如 下 样式 来 控制 。 


属性 选择 器 ，| 


新 建 网 页 ， 保 存 为 test2.html， 在 <body> 内 使 用 <form> 标 签 包含 一 个 文本 框 和 一 个 密码 域 。 


<form> 
<p><label for="user"> 文 本 框 : </label> 


<input type="text" value=" 看 我 的 颜色 " id="user" name="user" /></p> 


<p><label for="pass"> 密 码 域 ，</label> 


<input type="password" value=" 看 我 的 颜色 " id="pass" name="pass" /></p> 


</form> 


在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 ， 然 后 输入 下 面 样式 。 


body { font-size: 14px: 
input { 
width: 200px; 
height: 25px; 
border: 1px solid #339999; 
background-color: #99CC66; 
} 
input[type='password'] { background-color: #F00; } 


在 正 浏览 器 中 预览 ， 演示 效果 如 图 13.6 所 示 。 

也 可 以 使 
象 中 即 可 。 

<style type="text/css"> 


input.new { background-color: #00;} 
</style> 


许 文本 大 小 */ } 
/# 设置 宽度 *#/ 
上 # 设置 高 度 */ 
此 设置 边框 #/ 
人 # 设置 背景 颜色 */ 


上 # 设置 背景 颜色 */ 


类 样式 控制 表单 样式 。 以 上 面 示例 为 基础 ， 简 单 定义 一 个 类 样式 ， 然 后 添加 到 表单 对 


<input type="password" value=" 看 我 的 颜色 " id="pass" name="pass" class="new" /> | 
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图 13.5 文本 框 和 文本 区 域 样式 
【示例 3】 大 部 分 表单 对 象 获得 焦点 时 ， 


图 13.6 ”使 用 伪 类 样式 控制 表单 对 象 


会 高 亮 显示 ， 提 示 用 户 当前 焦点 的 位 置 ， 如 使 用 CSS 伪 


| 类 :focus 可 以 实现 输入 框 的 背景 色 的 改变 ,使 用 CSS 伪 类 :hover 可 以 实现 当 鼠 标 滑 过 输入 框 时 ， 加 亮 
或 者 改变 输入 框 的 边框 线 ， 提 示 当 前 鼠标 滑 过 输入 框 。 
新 建 网 页 ， 保 存 为 test3.html， 在 <body> 内 使 用 <form> 标 签 包含 一 个 文本 框 和 一 个 密码 域 。 


<form> 
<p><label for="user"> 文 本 框 : </label> 


<input type="text" value=" 看 我 的 颜色 " id="user" name="user" /></p> 


<p><label for="pass"> 密 码 域 ， </label> 


<input type="password" value=" 看 我 的 颜色 " id="pass" name="pass" class="new" /> 


</p> 
</form> 


在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 内 部 样式 表 ， 输 入 下 面 样式 。 


body { font-size: 14px; 
input { 
width: 200px: 
height: 25px; 
border: 1px solid #339999; 
background-color: #99CC66; 


height: 25px; 
border: 3px solid #339999; 
background-color: #99CC66; 
} 
input:focus { background-color: #EF0000; 
input:hover { border: 3px dashed #99FFO00; 


让 设置 宽度 */} 


上 # 设置 宽度 所 
上 # 设置 高 度 *#/ 
上 # 设置 边框 样式 */ 
上 # 设置 背景 颜色 */ 


上 定义 行内 块 状 显 示 */ 
# 设置 宽度 *#/ 
上 # 设置 右 对 齐 *#/ 


上 # 设置 宽度 */ 


入 设置 边框 样式 */ 
刻 设置 背景 颜色 */ 


庆 设置 背景 颜色 */} 
此 设置 边框 样式 */} 
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在 正 浏 览 器 中 预览 ， 演 示 效 果 如 图 13.7 所 示 。 到 
© EE ac|essz  。 “ 装 医 


13.2.2 ”定义 单 选 按钮 和 复 选 框 样式 rt El 


使 用 CSS 可 以 简单 设计 单 选 按钮 和 复 选 枉 的 样式 ，。 | sox 拓 有 有 
如 边框 和 背景 色 。 如 果 整 体 改变 其 风格 ， 需 要 通过 
JavaScript 和 背景 图 替换 的 方式 来 间接 实现 。 下 面 以 单 
选 按 钮 为 例 进行 演示 说 明 , 复 选 框 的 实现 可 以 参考 本 节 
示例 源 代 码 。 
设计 思路 如 下 。 | 
(1) 根据 需要 设计 两 种 图 片 状态 选中、 未 选中 ， 后 期 通过 不 同 的 class 类 实现 背景 图 像 的 改变 。 | 
(2) 通过 <label> 标 签 的 for 属性 和 单 选 按钮 id 属性 值 实现 内 容 与 单 选 按钮 的 关联 ， 即 单 击 单 选 | 
按钮 相对 应 的 文字 时 ， 单 选 按钮 被 选中 。 | 
(3) 借助 JavaScript 脚本 实现 单 击 时 动态 改变 class 类 ， 实 现 背 景 图 像 的 切换 。 
【操作 步骤 】 
(1) 在 Photoshop 中 设计 两 个 大 小 相等 的 最 图 标 ， 图 标 才 式 如 图 38， 和 ) 
(2) 新 建 网 页 ， 保 存 为 test1.html， 在 <body> 内 使 用 <form> 标 签 包含 多 个 单 图 13.8 设计 背景 | 
选 按钮 。 该 表单 设计 评选 各 个 浏览 器 被 认可 的 人 数 ， 选 项 有 Firefox 浏览 器 . 正 | 
浏览 器 、 谷 歌 浏览 器 等 。 | 
<form> | 
<h3> 请 选择 您 最 喜欢 的 浏览 器 </h3> | 
总 | 
<input type="radio" checked="" id="radio0" value="radio" name="group"/> 
<label for="radio0" class="radio1">Internet Explorer</label> </p> 
< 
<input type="radio" checked="" id="radiol" value="radio" name="group"/> 
<label for="radiol" class="radiol" >Maxthon</label></p> 
< 
3 <input type="radio" checked="" id="radio2" value="radio" name="group"/> 
<label for="radio2" class="radio2" >Mozilla Firefox</label></p> 
<p> 
<input type="radio" checked="" id="radio3" value="radio" name="group"/> 
<label for="radio3" class="radio1" > 谷歌 浏览 器 </label></p> | 
<p> | 
2 <input type="radio" checked="checked" id="radio4" value="radio" name="group"/> 
<label for="radio4" class="radio1" >Opera</label></p> | 


图 13.7 使 用 伪 关 设计 动态 样式 效果 | 


<p> 
<input type="radio" checked="" id="radio5" value="radio" name="group"/> 
<label for="radio5" class="radiol" > 世界 之 窗 </label></p> | 
<p> | 
<input type="radio" checked="" id="radio6" value="radio" name="group"/> | 
<label for="radio6" class="radiol" > 搜狗 浏览 器 </label></p> | 
</form> | 


(3) 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 | 


(4) 页 面 进 行 初始 化 ， 网 页 内 容 为 16 号 黑体 。 表 单 <form> 元 素 宽度 为 600 像素 ， 为 每 行 存放 3 ， | 
个 单 选 按钮 确定 空间 ， 并 使 表单 在 浏览 器 居中 显示 。<form> 元 素 的 相对 定位 应 去 掉 ， 此 处 体现 子 元 素 | 
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设置 绝对 定位 时 其 父 元 素 最 好 能 设置 相对 定位 ， 减 少 bug 的 出 现 。 
/页 面 基 本 设置 及 表单 <form> 元 素 初 始 化 */ 
body {font-family:" 黑 体 "; font-size:16px:} 
form {position:relative; width:600px; margin:0 auto:; text-align:center:} 
(5) <p> 标 签 宽度 为 200 像素 ， 并 设置 左 浮动 ， 实 现 表单 〈 表 单 的 宽度 为 600 像素 ，600/200=3) 
内 部 横向 显示 3 个 单 选 按钮 。 各 个 浏览 器 名 称 长 短 不 同 ， 对 其 进行 左 对 齐 设置 ， 达 到 视觉 上 的 对 齐 。 
<p> 标 签 在 不 同 浏览 器 下 默认 间距 大 小 不 一 致 ， 此 处 设置 内 外 间距 为 0 像素 ， 会 发 现 第 一 行 单 选 按钮 
和 第 二 行 单 选 按钮 过 于 紧密 ， 影 响 美观 ， 于 是 设置 上 下 外 间距 (margin) 为 10 像素 。 
Pp{ width:200px; float:left; text-align:left; margin:0; padding:0; margin:10px 0px:} 
(6) <input> 标 签 的 ID 值 和 <label> 标 签 的 for 属性 值 一 致 ， 实 现 二 者 关联 ， 并 将 <input> 标 签 进 
行 隐藏 操作 。 即 <input> 标 签 设置 为 绝对 定位 ， 并 设置 较 大 的 left 值 ， 如 left:-999em; <input> 标 签 完全 
移出 浏览 器 可 视 区 域 之 外 , 达到 隐藏 该 标签 的 作用 ,为 紧 跟 在 它 后 面 的 文字 设置 背景 图 替代 单 选 按钮 
(<input> 标 签 ) 做 铺垫 。 
input {position: absolute: left: -999em: } 


(7) <label> 标 签 添加 class 类 radiol 和 radio2， 代 表单 选 按钮 未 选中 和 选中 两 种 状态 。 现 在 分 别 
对 class 类 radiol 和 radio2 进行 设置 ， 二 者 CSS 属性 设置 一 致 ， 区 别 在 于 其 背景 图 的 不 同 ， 有 具体 方法 


| 如下。 


回 ”设置 背景 图 不 平 铺 ， 起 始 位 置 为 左上 角 ， 清 除外 间距 设置 。 背 景 图 的 宽度 是 33 像素 ， 高 度 
是 34 像素 ， 即 设置 的 背景 图 和 文字 的 间距 一 定 要 大 于 33 像素 ， 防 止 文字 压 住 背景 图 (文字 
在 图 片上 面 ) 。 

设置 左 内 间距 为 40 像素 (可 调整 大 小 )， 设 置 <label> 标 签 高 度 为 34 像素 ， 行 高 也 是 34 像素 ， 

实现 垂直 居中 ， 且 完整 显示 背景 图 〈 高 度 值 必 须 大 于 34 像素 ) ， 用 背景 图 代替 单 选 按钮 。 

在 浏览 器 显示 中 观察 页 面 ， 背 景 图 未 显示 完整 ， 此 时 需要 将 <label> 标 签 的 CSS 属性 设置 为 

块 元 素 ， 设 置 的 高 度 才 有 效 。 当 鼠标 指针 移 至 <label> 标 签 时 设置 指针 变化 为 手 形 ， 提 示 当 前 

可 以 单 击 。 最 后 加 入 JavaScript 脚本 ， 实 现 动态 单 击 选中 效果 ， 脚 本 不 属于 本 书 介绍 范围 ， 

读者 可 以 直接 使 用 (也 可 直接 删除 JavaScript 脚本 ) 。 单 选 按钮 可 以 通过 背景 图 替代 ， 同 样 

如 示例 ， 使 用 背景 图 也 可 以 替代 复 选 框 的 默认 按钮 样式 。 

-radiol {margin: Opx:padding-left: 40px:color: #000;line-height: 34px:height: 34px: 
background:url(img/4.jpg) no-repeat left top;cursor: pointer;display:block; } 

‘Tadio2 {background:url(img/3.jpg) no-repeat left top; } 

(8) 在 正 浏 览 器 中 预览 ， 演 示 效 果 如 图 13.9 所 示 。 


回 


rectiherl = BO 


请 选择 您 电 喜 欢 的 浏览 需 


Tnternet Explorer Maxthon 


省 歌 浏览 各 Or 


禄 独 浏 览 壬 


图 13.9 使 用 背景 图 设计 的 单 选 按 钮 样式 
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13.10 ”使 用 背景 图 设计 的 复 选 框 样式 


13.2.3 ”定义 选择 框 样式 


不 同 浏览 器 对 于 CSS 控制 选择 框 的 支持 不 是 很 统一 。 一 般 情况 下 ， 通 过 CSS 可 以 简单 地 设置 先 EE 
择 框 的 字体 和 边框 样 式 ， 对 下 拉 菜单 中 的 每 个 选项 定义 单独 的 青 景 、 字 体 等 效果 ， 但 是 对 于 下 拉 箭 头 
的 外 观 ， 需 要 借助 JavaScript 脚本 以 间接 方式 控制 。 


【操作 步 又】 
(1) 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 内 使 用 <form> 标 签 包 含 一 个 下 拉 菜 单 。 
<div class=box> 
<select > 


<option class="bjcl"> 北 京 </option> 
<option class="bjc2"> 上 海 </option> 
<option class="bjc3"> 天 津 </option> 
<option class="bjc4"> 重 庆 </option> 
</select> 
</div> 
(2) 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 输 入 下 面 样式 。 添 
加 不 同 class 类 名 实现 不 同 <option> 标 签 的 背景 颜色 ， 最 终 达 到 七 彩虹 颜色 的 下 拉 菜 单 。 
(3) 为 <select> 标 签 的 父 元 素 <div> 标 签 设置 宽度 为 120 像素 ， 焉 浏览 器 下 设置 为 150 像素 ， 超 
出 部 分 隐藏 ， 通 过 第 二 步 查看 超出 部 分 隐藏 是 否 有 效 。 
.box {width:120px;width:150px\9; overflow:hidden:} 


(4) 为 <select> 标 签 设置 宽度 为 136 像素 ， 它 的 值 小 于 外 层 <div> 标 签 的 宽度 ， 对 其 设置 高 度 为 23 
像素 ， 因 为 背景 图 像 为 119 像素 x23 像素 ， 最 外 层 的 <div> 标 签 设置 的 宽度 是 背景 图 的 宽度 所 定义 的 。 
背景 图 的 设置 是 查看 现代 浏览 器 和 下 浏览 器 对 <select> 标 签 支持 情况 。 通 过 图 13.11 和 图 13.12 比较 
可 以 发 现 ， 正 浏览 器 超出 部 分 没有 隐藏 ， 且 下 浏览 器 中 <select> 标 签 与 其 子 元 素 <option> 标 签 的 宽度 
为 120 像素 ， 而 现代 浏览 器 <select> 标 签 宽 度 为 136 像素 ， 其 子 元 素 并 没有 与 <selecf> 标 签 宽度 一 致 ， 
而 是 与 <div> 标 签 宽度 一 致 ， 通 过 为 box 设置 高 度 200 像素 及 背景 色 可 查看 。 

select{width:136px; color: #909993; border-none:height:23px: line-height:23px; 


background:none;background:url(images/5.jpg) no-repeat left top: color:#000000; font-weight'bold:} 
.box {height:200px; background-color:#3C9} 
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| (5) 为 下 拉 菜 单 的 每 个 选项 设置 不 同 的 背景 颜色 ， 通 过 <option> 标 签 的 不 同 的 clss 名 设置 不 同 
的 背景 颜色 ， 实 现 七 彩虹 效果 。<option> 标 签 的 值 与 <select> 标 签 高 度 应 一 致 ， 设 置 为 手 型 ， 高 度 为 
| 23 像素， 更改 鼠标 指针 样式 为 手 形 。 


全 jel{background-color#0C9} 


| -bjc2 {background-color:#F96} 
.bjc3 {background-color:-#0F0} 
| -bjc4 {background-color:#C60} 


option {font-weight:bold; border:none; line-height:23px: height:23px; cursor:pointer;} 
(6) 保存 页 面 ， 在 浏览 器 中 预览 ， 演 示 效 果 如 图 13.11 和 图 13.12 所 示 。 


各 loalhos/mystejtedthtm| 转 跟 >C| » 三 


图 13.11 正中 下 拉 菜 单 不 支持 背景 图 图 13.12 ”Firefox 中 下 拉 菜 单 支持 背景 图 


| 通过 比较 发 现 , 下 浏览 器 不 支持 <select> 标 签 的 背景 图 设置 , 而 Firefox 浏览 器 则 已 经 实现 。 谷歌 、 
| Opera 等 浏览 器 也 不 支持 。 通 过 JavaScript 和 CSS 相 结 合 可 以 模拟 <select> 标 签 。 

| 如 果 下 拉 菜单 设计 简单 ， 只 有 对 下 拉 菜 单 的 宽度 、 字 体 颜 色 等 简单 要 求 的 效果 ， 采 用 <select> 标 
| 签 ， 如 果 需 要 含有 特殊 的 设计 效果 ， 对 其 背景 图 设置 ， 改 变 下 拉 菜 单 下 拉 按 钮 形状 ， 一 般 都 是 通过 其 
| 他 标签 模拟 实现 下 拉 菜 单 的 效果 ， 而 不 再 通过 <select> 标 签 设置 。 


13.3 案例 实战 


本 节 将 结合 几 个 案例 详细 讲解 表格 和 表单 页 面 的 一 般 设计 方法 。 
13.3.1 设计 细 线 表格 


本 例 使 用 CSS3 的 border-radius 为 表格 定义 圆 角 ; 使 用 box-shadow 为 表格 添加 内 阴影 ， 设 计 高 亮 
| 边 效果 ; 使 用 transition 定义 过 渡 动画 ， 让 鼠标 指针 移 过 数据 行 ， 渐 显 浅 色 背 景 ， 使 用 linear-gradientO 
函数 定义 标题 列 渐变 背景 效果 ， 以 替换 传统 使 用 背景 图 像 模拟 渐变 效果 使 用 text-shadow 属性 定义 
| 文本 阴影 ， 让 标题 文本 看 起 来 更 富 立体 感 ， 演 示 效 果 如 图 13.13 所 示 。 
| 【操作 步骤 】 

(1) 新 建 HTMLS5 文档 ， 设 计 表 格 结构 。 

<table summary=" 历 届 奥 运 会 中 国 奖牌 数 "> 
<caption> 历 届 奥 运 会 中 国 奖 牌 数 </caption> 

<tr><th> 编 号 </th><th> 年 份 </th><th> 城 市 </th><th> 金 牌 </th><th> 银 牌 </th><th> 铜 牌 </th><th> 总 计 


| </thead> 
<tbody> 
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<tr><td> 第 23 届 <Jtd><td>1984 年 Jtd><td> 洛 杉 矶 (美国 ) <ltd><td>15<Jtd><td>8<ltd><td>9</td> 
<td>32</td></tr> | 
<tr><td> 第 24 届 </td><td>1988 年 <td><td> 汉 城 (韩国 ) </td><td> 5</td><td>11</td><td>12</td> 
<td>28</td></tr> | 
<tr><td> 第 25 届 </td><td>1992 年 </td><td> 巴 塞 罗 那 (西班牙 ) </td><td>16</td><td>22</td><td> | 
16</td><td>54</td></tr> | 
<tr><td> 第 26 届 </td><td>1996 年 </td><td> 亚 特 兰 大 (美国 ) </td><td>16</td><td>22</td><td>12 
</td><td>50</td></tr> 
<tr><td> 第 27 届 </td><td>2000 年 </td><td> 悉 尼 (澳大利亚) </td><td>28</td><td>16</td><td>15 
</td><td>59</td></tr> 
<tr><td> 第 28 届 </td><td>2004 年 </td><td> 雅 典 (希腊)</td><td>32</td><td>17</td><td>14</td> 
<td>63</td></tr> 
<tr><td> 第 29 届 </td><td>2008 年 <td><td> 北 京 ( 中 国 ) </td><td>51</td><td>21</td><td>28</td> 
<td>100</td></tr> 
<tr><td> 第 30 届 </td><td>2012 年 <td><td> 伦 敦 (英国) </td><td>38</td><td>27</td><td>23</td> 
<td>88</td></tr> 
<tr><td> 第 31 届 </td><td>2016 年 </td><td> 里 约 热 内 卢 (巴西 ) </td><td>26</td><td>18</td><td> 
26</td><td>70</td></tr> 
</tbody> 
<tfoot> 
<tr><th> 合 计 </th><td colspan="4">543 枚 </td></tr> 
</tfoot> 
</table> 
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| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
历届 奥运 会 中 国 奖牌 数 
城市 | 
洛杉矶 (美国 ) | 
级 域 (韩国 ) | 
巴塞 罗 那 【西班牙 ) | 
亚特兰大 【美国 ) 
悉尼 (次 大 利 亚 ) 
收 战 ( 希 错 ) 
北京 中国 ) 


| 
| 
| 
| 
| 
| 
| 
| 
| 
伦敦 (英国 ) | 
| 
时 约 热 内 卢 《巴西 ) 了 
| 
| 
| 
| 
| 
| 
| 
| 
| 


图 13.13 设计 表格 样式 


在 这 个 表格 中 ， 使 用 的 标记 从 上 至 下 依次 为 <caption>、<thead>、<tbody> 和 <tfoot>， 分 别 定义 表 
格 的 标题 、 列 标题 行 、 数 据 区 域 、 脚 注 行 。 | 
(2) 在 头 部 区 域 <head> 标 签 中 插入 一 个 <style type="text/css"> 标 签 ， 在 该 标签 中 输入 下 面 样式 代 
码 ， 定 义 表格 默认 样式 ， 并 定制 表格 外 框 主题 类 样式 。 
table { 
*border-collapse: collapse; /* 兼 容 IE7 及 其 以 下 版 本 浏览 器 */ 
border-spacing: 0; LL 
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width: 100%;} 
-bordered { 
border: solid #ccce 1px: 
border-radius: 6px; 
box-shadow: 0 1px lpx #ccc;} 
(3) 继续 输入 下 面 样式 ， 统 一 单元 格 样式 ， 定 义 边框 、 空 隙 效果 。 
| -bordered td, .bordered th { 
| border-left: 1px solid #cce; 
| border-top: 1px solid #cce; 
padding: 10px: 
text-align: left:} 
| (4) 输入 下 面 样式 代码 ， 设 计 表格 标题 列 样式 ， 通 过 渐变 效果 设计 标题 列 背 景 效 果 ， 并 适当 添 
| 加 阴影 ， 营 造 立体 效果 。 
| ee 
background-color: #dce9f9; 
background-image: linear-gradient(top, #ebf3fc, #dce9f9); 
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset: 
border-top: none: 
text-shadow: 0 1px 0 rgba(255,255,255,.5);} 
| (5) 输入 下 面 样式 代码 ， 设 计 圆 角 效 果 。 在 制作 表格 圆 角 效果 之 前 ， 有 必要 先 完成 这 一 步 。 表 
， 格 的 border-collapse 默认 值 是 separate， 将 其 值 设 置 为 0， 也 就 是 “border-spacing: 0;”。 
| 
*border-collapse: collapse; /* 兼容 IE7 及 其 以 下 版 本 浏览 器 */ 


border-spacing: 0; 


| 为 了 能 兼容 IE7 以 及 更 低 的 浏览 器 ， 需 要 加 上 一 个 特殊 的 属性 border-collapse， 并 且 将 其 值 设 置 
| 为 collapse。 


(6) 设计 圆 角 效果 ， 有 具体 代码 如 下 。 
/# 整个 表格 设置 了 边框 ， 并 设置 了 贺 角 */ 
.bordered { border: solid #ccc 1px:; border-radius: 6px:} 
必 表格 头 部 第 一 个 也 需要 设置 一 个 左上 角 圆 角 */ 
.bordered th:first-child { border-radius: 6px 0 0 0;} 
此 表格 头 部 最 后 一 个 也 需要 设置 一 个 右上 角 圆 角 */ 
.bordered th:last-child { border-radius: 0 6px 0 0;} 
让 表格 最 后 一 行 的 第 一 个 td 需要 设置 一 个 左下 角 圆 角 */ 
.bordered tr:last-child td:first-child {border-radius: 0 0 0 6px:} 
上 证 表格 最 后 一 行 的 最 后 一 个 td 需要 设置 一 个 右 下 角 圆 角 */ 
.bordered tr:last-child td:last-child {border-radius: 0 0 6px 0;} 


(7) 由 于 在 table 中 设置 了 一 个 边框 ， 为 了 显示 圆 角 效果 ， 需 要 在 表格 的 4 个 角 的 单元 格 上 分 别 
| 设置 圆 角 效 果 ， 并 且 其 圆 角 效 果 需 要 和 表格 的 圆 角 值 大 小 一 样 ， 反 之 ， 如 果 在 table 上 没有 设置 边框 
| 只 需要 在 表格 的 4 个 角落 的 单元 格 设置 圆 角 ， 就 能 实现 圆 角 效 果 。 

| 挛 表 格 头 部 第 一 个 也 需要 设置 一 个 左上 角 辆 角 */ 


.bordered th:first-child { border-radius: 6px 0 0 0:} 
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放 表格 头 部 最 后 一 个 也 需要 设置 一 个 右上 角 圆 角 */ 
-bordered th:last-child { border-radius: 0 6px 0 0:} 
A* 表格 最 后 一 行 的 第 一 个 td 需要 设置 一 个 左下 角 圆 角 */ 
.bordered tfoot td:first-child {border-radius: 0 0 0 6px:} 
A* 表格 最 后 一 行 的 最 后 一 个 td 需要 设置 一 个 右 下 角 圆 角 */ 
.bordered tfoot td:last-child {border-radius: 0 0 6px 0:} 
在 上 面 的 代码 中 ， 使 用 了 许多 CSS3 的 伪 类 选择 器 。 Note 
(8) 除了 使 用 了 CSS3 选择 器 外 ， 本 例 还 采用 了 很 多 CSS3 的 相关 属性 ， 这 些 属性 将 在 后 面 章节 
中 进行 详细 介绍 ， 例 如 : 
使 用 box-shadow 制作 表格 的 阴影 。 


.bordered { box-shadow: 0 1px lpx #cce:} 
使 用 transition 制作 hover 过 渡 效 果 。 
.bordered tr {transition: all 0.1s ease-in-out:} 
使 用 gradient 制作 表 头 渐变 色 。 


-bordered th { 
background-color: #dce9f9; | 
background-image: linear-gradient(to top, #ebf3fe, #dce9f9); | 

} 


(9) 本 例 使 用 了 CSS3 的 text-shadow 来 制作 文字 阴影 效果 ，rgba 改变 颜色 透明 度 等 。 
(10) 为 <table> 标 签 应 用 bordered 类 样式 即 可 。 


<table summary=" 历 届 奥 运 会 中 国 奖牌 数 " class="bordered"> 


13.3.2 ”设计 斑马 线 表格 


本 例 在 前 面 示例 的 数据 表格 结构 的 基础 上 , 使 用 CSS3 技术 设计 一 款 斑马 线 表 格 , 效果 如 图 13.14 
所 示 。 
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历届 奥运 会 中 国 奖牌 数 
城市 金牌 


洛杉矶 (美国 ) 
汉城 韩国) 
巴塞 罗 那 【西班牙 ) 
亚特兰大 [美国 ) 


悉尼 (澳大利亚 ) 
雅典 〈 郑 错 ) 

北京 《中 国 ) 

伦敦 〔 英 国 ) 
里 约 热 内 卢 【巴西 ) 


图 13.14 设计 单线 表格 效果 


【操作 步骤 】 
(1) 新 建 HTML5 文档 ， 复 制 13.3.1 节 示例 的 数据 表格 结构 。 人 
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(2) 在 头 部 区 域 <head> 标 签 中 插入 一 个 <style type="text/css"> 标 签 ， 在 该 标签 中 输入 下 面 样式 代 
码 ， 定 义 表格 默认 样式 ， 并 定制 表格 外 框 主题 类 样式 。 
table { 
*border-collapse: collapse; /* I[E7 and lower */ 
border-spacing: 0; 


Note width: 100%:; 
} 


(3) 设计 单元 格 样式 以 及 标题 单元 格 样式 ， 取 消 标题 单元 格 的 默认 加 粗 和 居中 显示 。 


.table td, .table th { 
padding: 4px; /# 增 大 单元 格 补 白 ， 避 免 拥 挤 */ 
border-bottom: 1px solid #f2f2f2; /#* 定义 下 边框 线 */ 
text-align: left; 人 # 文本 左 对 齐 */ 
font-weight:normal; 谍 取消 加 粗 显示 */ 
} 
(4) 为 列 标题 行 定义 渐变 背景 ， 同 时 增加 高 亮 内 阴影 效果 ， 为 标题 文本 增加 淡淡 阴影 色 。 
‘table thead th { 


text-shadow: 0 1px 1px rgba(0,0,0,.1); 
border-bottom: 1px solid #cce: 
background-color: #eee; 
background-image: linear-gradient(to top, #f5f5f5, #eee); 
} 
(5) 设计 数据 隔行 换 色 效果 。 
.table tbody tr:nth-child(even) { 
background: #f5f5f5; 
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset'; 
} 
(6) 设计 表格 圆 角 效果 。 
启 左上 角 圆 角 */ 
.table thead th:first-child { border-radius: 6px 0 0 0;} 
旋 右上 角 圆 角 所 
.table thead th:last-child {border-radius: 0 6px 0 0:} 
让 左下 角 圆 角 */ 
.table tfoot td:first-child, .table tfoot th:first-child{ border-radius: 0 0 0 6px:} 
从 右 下 角 圆 角 */ 
-table tfoot td:last-child,.table tfoot th:last-child {border-radius: 0 0 6px 0:} 


13.3.3 ”设计 登录 表单 
回 


生生 | 登录 页 面 一 般 比 较 简单 ， 包 含 的 结构 和 信息 都 很 简单 ， 但 是 要 设计 一 个 比较 有 新 意 的 登录 框 ， 需 
”要 用 户 提前 在 Photoshop 中 进行 设计 ， 然 后 再 转换 为 HTML 标准 布局 效果 。 

| 这 是 一 款 个 性 的 网 站 登录 页 面 , 从 效果 看 登录 框 精致 、 富 有 立体 效果 , 表单 对 象 的 边框 色 使 用 #HE 

| 值 进 行 设置 ， 定 义 为 白色 ; 表单 对 象 的 阴影 色 使 用 rgba(0.0.0.0.1) 值 进行 设置 ， 定 义 为 非常 透明 的 黑 

，” 色 ;字体 颜色 使 用 hsla(0,0%,100%,0.9) 值 进行 设置 ， 定 义 为 轻微 透明 的 白色 ， 如 图 13.15 所 示 ， 示 例 
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必 


主要 代码 如 下 所 示 。 | 


<style type="text/css"> | 
body{ “* 为 页 面 添加 背景 图 像 ， 显 示 在 中 央 项 部 位 置 ， 并 列 完 全 覆盖 窗口 */ | 
background: #eedfcc url(images/bg.jpg) no-repeat center top; | 估 直 
background-size: cover; | 
} | 
-om { /* 定义 表单 框 的 样式 */ Note 
width: 300px; 旋 固定 表单 框 的 宽度 *#/ | 
Imargin: 30px auto; 诊 居中 显示 */ 
border-radius: Spx; /# 设计 圆 角 效果 */ 
box-shadow: 0 0 Spx rgba(0,0,0,0.1), 上 设计 润 边 效果 *#/ 
0 3px 2px rgba(0,0,0,0.1); 谍 设计 淡淡 的 阴影 效果 */ 
} 
-form p {/* 定义 表单 对 象 外 框 圆 角 、 白 边 显示 */ 
width: 100%; 
float: left: 


border-radius: Spx: 
border: 1px solid #fff: 


} 

上 # 定义 表单 对 象 样式 */ 

.form input[type=text], 

.form input[type=password] { 
上 # 固定 宽度 和 大 小 到 


width: 100%; 

height: SOpx; 

padding: 0; 

上 增加 修饰 样式 */ 

border: none; 此 移出 默认 的 边框 样式 */ 
background: rgba(255,255,255,0.2); 旋 增加 半 透 明 的 白色 背景 */ 
box-shadow: inset 0 0 10px rgba(255,255,255,0.5); 证 为 表单 对 象 设计 高 亮 效 果 */ 


久 定义 字体 样式 */ 
text-indent: 10px: 
font-size: 16px; 
color:hsla(0,0%,100%,0.9); 
text-shadow: 0 -1px 1px rgba(0,0,0,0.4); 此 为 文本 添加 阴影 ， 设 计 立 体 效果 */ 
} 
.form input[type=text] { 遍 设计 用 户 名 文本 框 底 部 边框 样式 ， 并 设计 顶部 圆 角 */ 
border-bottom: 1px solid rgba(255,255,255,0.7); 
border-radius: Spx Spx 0 0; 
} 
.form input[type=password] { 上 # 设计 密码 域 文本 框 顶 部 边框 样式 ， 并 设计 底部 圆 角 */ 
border-top: 1px solid rgba(0,0,0,0.1); 
border-radius: 0 0 Spx Spx:; | 


} | 
谍 定义 表单 对 象 被 激活 ， 或 者 鼠标 指针 经 过 时 ， 增 亮 背景 色 ， 并 清除 轮廓 线 */ | 
.form input[type=text]:hover, | 
.form input[type=password]:hover, | 
.form input[type=text]:focus, | 
.form input[type=password]:focus { | 
background: rgba(255,255,255,0.4); LL 
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outline: none; 
} 
| </style> 
| <form class="form"> 
到 | 和 
| <input type="text" id="login" name="login" placeholder=" 用 户 名 "> 
<input type="password" name="password" id="password" placeholder=" 密 码 "> 
| </p> 
</form> 


x 


5 GET ET 且 记 


图 13.15 设计 登录 表单 
13.3.4 ”设计 搜索 表单 


澡 大 部 分 网 站 都 会 提供 站 内 搜索 , 如 何 设计 好 用 的 搜索 框 是 很 多 用 户 需要 思考 的 问题 。 在 各 大 站 点 ， 
“和 攻 轩 | 划 至 是 一 些小 型 网 站 都 包含 大 量 设 计 风 格 各 异 的 搜索 框 ， 但 功能 局 限 在 其 相关 网 站 中 的 内 容 搜索 。 
| 搜索 框 一 般 包含 “关键 词 输入 框 ”“ 搜 索 类 别 ”““ 搜 索 提示 ”“ 搜 索 按 钮 ” 当然 简单 的 搜索 框 只 有 
“关键 记 输 入 框 ”和 “搜索 按钮 ”这 西部 分 。 本 例 将 介绍 如 何 设计 附带 有 提示 的 搜索 框 样式 ， 演 示 效 


| 果 如 图 13.16 所 示 。 
| 5 
€3 G 
图 13.16 设计 搜索 框 
【操作 步骤 】 

| (1) 启动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 输入 如 下 结构 代码 ， 
| 

<h3> 搜 索 框 </h3> 

<div class="content"> 
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性 | 


<form method="post" action=""> 
<select> 
<option value="1"> 网 页 </option> 
<option value="2"> 图 片 </option> 
<option value="3"> 新 闻 </option> 
<option value="4">MP3</option> 
</select> Note 
<input type="text" value="css" /> <button type="submit"> 搜 索 </button> 
<div class="search tips"> 
<h4> 搜 索 提示 </h4> 
<u> 


<li><a hre 伍 "#">css 视频 </a><span> 共 有 589 个 项 目 </span></li> | 
<li><a hre 伍 "#">css 教程 </a><span> 共 有 58393 个 项 目 </span></li> | 
<li><a href="#">csstdiv</a><span> 共 有 158393 个 项 目 </span></li> | 
<li><a hre 伍 "#"'>ess 网 页 设计 </a><span> 共 有 58393 个 项 目 </span></li> | 
<]i><a href="#">css 样式 </a><span> 共 有 158393 个 项 目 </span></li> 


</div> 


整个 表单 结构 分 为 两 个 部 分 ， 将 “下 拉 选 择 ”“ 文 本 框 ?“ 按 钮 ” 归 为 一 类 ， 主 要 功能 是 用 于 搜索 | 
信息 ;“ 搜 索 提 示 ” 为 当 在 “文本 框 ” 中 输入 文字 时 ， 将 会 出 现 相对 应 的 搜索 提示 信息 ， 该 功能 主要 | 
是 由 后 台 程 序 开 发 人 员 实 现 ， 前 台 设计 师 只 需要 将 其 以 页 面 元 素 表 现 即 可 。 | 

(2) 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定义 一 个 内 部 样式 表 ， 然 后 逐步 输入 CSS | 
代码 ， 设 计 表 单 样式 。 | 

(3) 通过 分 析 最 终 效 果 可 以 看 到 ， 页 面 中 并 没有 显示 “站 内 搜索 ”和 “搜索 提示 ”这 两 个 标题 ，| 
且 “ 搜 索 按钮 ”是 以 图 片 代替 的 ,“ 搜 索 提 示 ” 是 出 现在 “搜索 输入 框 ”的 底部 ， 并 且 宽 度 与 输入 框 | 
相等 。 为 此 ， 开 始 在 内 部 样式 表 中 输入 下 面 样式 ， 对 表单 结构 进行 初始 化 设计 。 


-search box { /* 设置 输入 框 整体 宽度 、 相 对 定位 ， 为 其 子 级 元 素 的 定位 参考 */ 
position:relative; 
width:360px:} 
-search box* {/* 清除 输入 框 内 所 有 元 素 的 默认 样式 ， 并 且 设 置 字体 样式 等 */ 
margin:0; 
padding:0; 
list-style:none; 
font:normal 12px/1.5em "宋体 ", Verdana,Lucida, Arial, Helvetica, sans-serif;} | 
.search_box h3, .search tips h4 {display:none; } /* 隐藏 标题 文字 */ 


(4) 设置 搜索 框 整体 的 宽度 属性 值 以 及 其 所 有 子 元 素 的 内 补丁 、 边 界 等 相关 属性 。 为 了 方便 将 | 
搜索 提示 信息 框 通过 定位 的 方式 显示 在 搜索 输入 框 的 底部 ， 因此 在 .search 1 box 中 定 Es 义 position 属性 ， 
让 其 成 为 子 级 元 素 定位 的 参照 物 。 文 档 结构 中 的 标题 在 页 面 中 不 需要 显示 ， 因 此 可 以 将 其 隐藏 。 虽然 | 
现在 只 是 将 标题 文字 隐藏 了 ， 后 期 网 站 开发 过 程 如 果 需 要 显示 时 ， 可 以 直接 通过 CSS 样式 修改 ， 而 | | 
不 需要 再 次 去 调整 文档 结构 。 | 


.search_box select {/* 将 下 拉 框 设置 浮动 ， 并 设置 其 宽度 值 */ 
float:left: 


| 
人 


所 85 < 


| 缩 进 属性 隐藏 按 钮 上 的 文字 ， 使 用 图 片 代替。 


人 
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width:60px:} 
-search box input {/* 设置 搜索 输入 框 浮动 显示 ， 并 将 其 与 左右 两 边 的 元 素 添加 间距 */ 
float:left; 
width:196px: 
height:14px; 
padding:1px 2px; 
margin:0 Spx; 
border: lpx solid #619FCF:;} 
.search_box button {/* 设置 按钮 浮动 ， 以 缩 进 方式 隐藏 按钮 上 的 文字 */ 
float:left: 
width:59px; 
height:18px; 
text-indent:-9999px; 
border:0 none; 
background:url(images/btn_search.gif) no-repeat 0 0; 
cursor:pointer;} 


(5)“ 搜 索 类 别 ” 下 拉 框 、“ 搜 索 关键 字 ”输入 框 和 “搜索 按钮 ”这 3 个 元 素 按 照常 理 来 理解 原 


本 就 是 可 以 并 列 显示 的 ， 但 为 了 将 这 3 个 元 素 之 间 的 默认 空间 缩短 ， 因 此 使 用 “float:left;:” 使 它们 之 
| 间 的 距离 缩短 。 再 利用 输入 框 input 增加 可 控 的 边界 “margin:0 5px;” 调 整 三 者 之 间 的 间距 。 


三 者 之 间 整 体 样式 调整 完毕 后 , 再 对 其 细节 部 分 进行 详细 的 调整 修饰 。 美 化 输入 框 并且 利 用 文字 


(6) 下 拉 框 select 标签 只 是 设置 了 宽度 属性 值 ， 并 未 设置 其 高 度 属性 值 ， 其 中 的 原因 就 是 下 浏 


| 览 器 和 FF 浏览 器 对 其 高 度 属性 值 的 解析 完全 不 一 样 ,因此 采用 默认 的 方式 而 不 是 再 次 利用 CSS 样式 
| 定义 其 相关 属性 。 


(7) 按钮 button 标签 在 默认 情况 下 不 显示 手 形 样式 ， 因 此 需要 特殊 定义 。 
.search_tips {/* 将 搜索 提示 框 设置 的 宽度 与 输入 框 相等 ， 并 绝对 定位 在 输入 框 底部 */ 


position:absolute; 

top:17px; 

left:65px; 

width:190px; 

padding:Spx Spx 0; 
border:1px solid #619FCF:} 


(8)“ 搜 索 提示 框 ”使 用 绝对 定位 的 方式 显示 在 输入 框 的 底部 ， 其 宽度 属性 值 等 于 输入 框 的 宽度 


| 属性 值 ， 可 以 提高 视觉 效果 上 的 完美 。 不 设置 提示 框 的 高 度 属性 值 是 希望 搜索 框 能 随 着 内 容 的 增加 而 
| 自 适 应 高 度 。 


-search tips i {/* 设置 搜索 提示 框 内 的 列表 高 度 和 宽度 值 ， 利 用 浮动 避免 正 浏览 器 中 列表 上 下 间距 增多 的 


float:left: 
width:100%; 
height:22px; 
line-height:22px;} 


(9) 在 正 浏览 器 中 , 列表 标签 上 下 间距 会 因为 多 加 了 几 个 上 下 间距 的 bug 问题 ,为 了 避免 该 


问题 的 出 现 ,将 所 有 列表 下 标签 添加 浮动 float 属性 。 宽度 属 性 值 设 置 为 100% 可 以 避免 当 列表 二 标签 
具有 浮动 属性 时 ， 宽 度 自 适应 的 问题 。 
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.search_tips i a { /* 搜索 提示 中 相关 文字 居 左 显示 ， 并 设置 相关 样式 */ 
float:left; 
text-decoration:none; 
color:#333333;} 

-search tips li a:hover { /* 搜索 提示 中 相关 文字 在 鼠标 指针 悬 停 时 显示 红色 文字 */ 
color:#EF0000:} 

-search tipsli span { /* 以 灰色 弱化 搜索 提示 相关 数据 ， 并 居 右 显示 */ ‘Note 
float:right; 
color:#CCCCCC;} 


(10) 将 列表 项 <li> 标 签 中 的 锚 点 <a> 标 签 和 <span> 标 签 分 别 左右 浮动 ,使 它们 靠 两 边 显 示 在 者 | 
索 提 示 框 ”内 ， 并 相应 的 添加 文字 样式 做 细节 调整 。 


13.4 在 线 练 习 


1. 下 面 通 过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HTML5 设计 表格 结构 和 样式 。 感 兴趣 的 同 
学 可 以 扫 码 练习 。 


2. 下 面 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HTML5 es 
学 可 以 扫 码 练习 。 


在 线 纺 习 3 3 在 线 练习 4 
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使 用 CSS3 排版 网 页 


网 页 版 式 一 般 通过 栏目 的 行 、 列 组 合 来 设计 ， 根 据 网 页 效果 确定 ， 而 不 是 HTML 结构 ， 
如 单行 版 式 、 两 行 版 式 、 三 行 版 式 、 多 行 版 式 、 单 列 版 式 、 两 列 版 式 、 三 列 版 式 等 。 也 可 以 
根据 栏目 显示 性 质 进 行 设计 ， 如 流动 布局 、 浮 动 布局 、 定 位 布局 、 混 合 布 局 等 。 或 者 根据 网 
页 宽度 进行 设计 ， 如 固定 宽度 、 弹 性 宽度 等 。 本 章 将 有 具体 讲解 CSS3 布局 的 基本 方法 


【 学 习 重 点 】 


dl 


至 吾 吾 


了 解 网 页 布局 基本 概念 
熟悉 CSS 盒 模型 

掌 担 CSS 布局 基本 方法 

能 金 灵 活 设计 常规 网 页 布局 效果 


第 1] 生 章 使 用 CSS3 排版 网 页 je | 


14.1 CSS 盒 模型 


盒 模型 是 CSS 布局 的 核心 概念 。 了 解 CSS 盒 模型 的 结构 、 用 法 ， 对 于 网 页 布局 很 重要 ， 本 节 将 ~ 
介绍 CSS 盒 模型 构成 要 素 和 使 用 技巧 。 | Note 


14.1.1 认识 display 


在 默认 状态 下 ， 网 页 中 每 个 元 素 都 显示 为 特定 的 类 型 。 例 如 ，div 元 素 显示 为 块 状 ，span 元 素 显 | 
示 为 内 联 状 。 | 
使 用 CSS 的 display 属性 可 以 改变 元 素 的 显示 类 型 ， 用 法 如 下 。 
display:none | 
inline | block | inline-block | 
list-item | 
table | inline-table | table-caption | table-cell | table-row | table-row-group | 
table-column | table-column-group | table-footer-group | table-header-group | 
run-in 
box | a | flexbox | inline-flexbox | flex | inline-flex | 
display 属性 取 值 非常 多 , 在 上 面 语法 中 第 3、4 行 取 值 不 是 很 常用 , 第 5、6 行为 CSS3 新 增 类 型 ， | 
详细 说 明 请 读者 参考 CSS3 参考 手册 ， 比 较 常用 的 属性 取 值 说 明 如 下 。 | 
回 none: 隐藏 对 象 。 与 visibility: hidden 不 同 ， 其 不 为 被 隐藏 的 对 象 保留 物理 空间 。 
回 inline: 指定 对 象 为 内 联 元 素 。 
回 block: 指定 对 象 为 块 元 素 。 
加 inline-block: 指定 对 象 为 内 联 块 元 素 。 | 
block 以 块 状 显示 ， 占 据 一 行 ， 一 行 只 能 够 显示 一 个 块 元 素 ， 它 适合 搭建 文档 框架 ; inline 以 内 | 
联 显示 ,可 以 并 列 显 示 ， 一 行 可 以 显示 多 个 内 联 元 素 ， 它 适合 包 庄 多 个 对 象 ， 或 者 为 行内 信息 定制 | 
样式 。 
如 果 设 置 span 元 素 显示 为 块 状 效果 ， 只 需 定义 如 下 样式 。 


span { display:block: } 证 定义 行 内 元 素 块 状 显 示 */ 
如 果 设 置 div 以 行内 元 素 显 示 ， 则 可 以 使 用 如 下 样式 进行 定义 : 
div { display:inline; } 上 # 定义 块 状元 素 行内 显示 */ 


14.1.2 ”认识 CSS 盒 模型 


CSS 盒 模型 定义 了 网 页 对 象 的 基本 显示 结构 。 根 据 CSS 盒 模型 ， 网 页 中 每 个 元 素 都 显示 为 方形 ， 
从 结构 上 分 析 ， 它 包括 内 容 (content)、 填 充 (padding)、 边 框 (border) 和 边界 (margin)，CSS 盒 模 
型 基本 结构 如 图 14.1 所 示 。 

内 容 (content) 就 是 元 素 包 含 的 对 象 ， 填 充 (padding) 就 是 控制 所 包含 对 象 在 元 素 中 的 显示 位 
置 ， 边 框 (border) 就 是 元 素 的 边线 ， 边 界 (margin) 就 是 控制 当前 元 素 在 外 部 环境 中 的 显示 位 置 。 
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图 14.1 CSS 盒 模型 基本 结构 
14.1.3 ”定义 边界 


使 用 CSS 的 margin 属性 可 以 为 元 素 定义 边界 。 由 margin 属性 又 派生 出 4 个 子 属性 。 

回 margin-top (顶部 边界 ) 。 

回 marging-right ( 右 侧 边界 ) 。 

回 “marging-bottom (底部 边界 ) 。 

回 margin-left ( 左 侧 边界 ) 。 

这 些 属 性 分 别 控制 元 素 在 不 同方 位 上 与 其 他 元 素 的 间距 。 

【示例 1】 下 面 示例 设计 4 个 盒子 ， 通 过 设置 不 同方 向 上 边界 值 ， 来 调整 它们 在 页 面 中 的 显示 
位 置 ， 如 图 14.2 所 示 。 通 过 本 例 演示 ， 用 户 能 够 体会 到 边界 可 以 自由 设置 ， 且 各 边 边界 不 会 相互 
影响 。 


<style type="text/css"> 
div {* 统一 4 个 盒子 的 默认 样式 *#/ 
display: inline-block: 
height: 80px; width:80px: /A 
border: solid 1px red; /# 统一 边框 样式 */ 
} 
#boxl] {margin-top: 10px; margin-right: gem: margin-left: 8em;} /* 第 1 个 盒子 样式 *#/ 
#box2 {margin-top: 10px; margin-right: 6em: margin-left: 6em;} /# 第 2 个 盒子 样式 *#/ 
#box3 {margin-top: 20px: margin-right: 4em: margin-left 4em:} 让 第 3 个 盒子 样式 *#/ 
#box4 {margin-top: 20px: margin-right: 2em: margin-left 2em:} 让 第 4 个 盒子 样式 *#/ 
</style> 
<div id="box1"> 盒 子 1</div> 
<div id="box2"> 盒 子 2</div> 
<div id="box3"> 盒 子 3</div> 
<div id="box4"> 盒 子 4</div> 


0 


图 14.2 设置 盒子 的 边界 


党 提示 : 


图 图 


如 果 4 边 边界 相同 ， 则 直接 为 margin 定义 一 个 值 即 可 。 | 
如 果 4 边 边界 不 相同 ， 则 可 以 为 margin 定义 4 个 值 ，4 个 值 用 空格 进行 分 隔 ， 代 表 边 


的 顺序 是 顶部 、 右 侧 、 底 部 和 左 侧 。 


margin:top right bottom left: 


如 果 上 下 边界 不 同 ， 左 右边 界 相同 ， 则 可 以 使 用 3 个 值 定义 。 


margin:top right bottom; 


回 如 果 上 下 边界 相同 ， 左 右边 界 相同 ， 则 直接 使 用 两 个 值 进行 代替 : 第 一 个 值 表示 上 下 | 
边界 ， 第 二 个 值 表示 左右 边界 。 | 


Pp{ margin:12px 24px;} 
容 提示， margin 可 以 取 负 值 ， 这 样 就 


能 够 强迫 元 素 仿 移 原来 位 置 ， 实 现 相对 定位 功能 ， 利 用 这 个 


margin 功能 ， 可 以 设计 复杂 的 页 面 布局 效果 ， 后 面 章节 会 介绍 具体 的 演示 案例 。 
< 注意 ;流动 的 决 状元 素 丰 在 上 下 边界 重生 现象 ， 这 种 重生 将 以 最 大 边界 代替 最 小 边界 作为 上 下 两 ， 


个 元 素 的 距离 。 


【示例 2】 下 面 示例 定义 上 面 盒子 的 底部 边界 为 50 像素 ， 下 面 盒子 的 顶部 边界 为 30 像素 ， 如 果 


不 考虑 重合 ， 则 上 下 元 素 的 间距 应 该 为 80 像素 ， 而 实际 距离 为 50 像素 ， 如 图 14.3 所 示 。 


<style type="text/css"> 

div { height: 20px; border: solid 1px red;} 
#boxl {margin-bottom: S0px: } 

#box2 { margin-top: 30px; } 

</style> 

<div id="box1"></div> 

<div id="box2"></div> 


相 邻 元 素 的 左右 边界 一 般 不 会 发 生 


对 于 浮动 元 素来 说 ， 一 般 相 邻 浮动 元 素 的 边界 也 不 会 发 生 重合 。 


E 合 。 而 对 于 行内 元 素来 说 , 上 下 边界 是 不 会 产生 任何 效果 的 。 


pls 


Note | “和 目 目 国 3%x1s5v J 日 日 吕 33% x i135v 
(a) 下 面 盒子 的 项 边界 (b) 上 面 盒子 的 底 边界 


图 14.3 上 下 元 素 的 重 半 现象 
14.1.4 ”定义 边框 


使 用 CSS 的 border 属性 可 以 定义 边框 样式 ， 与 边界 一 样 可 以 为 各 边 定义 独立 的 边框 样式 。 

回 ”border-top (顶部 边框 ) 。 

回 “border-right ( 右 侧 边框 ) 。 

回 “border-bottom (底部 边框 ) 。 

回 ”border-left ( 左 侧 边框 ) 。 

| 边界 的 作用 是 用 来 调整 当前 元 素 与 其 他 元 素 的 距离 , 而 边框 的 作用 就 是 划 定 当前 元 素 与 其 他 元 素 
| 之 间 的 分 隔 线 。 

边框 包括 3 个 子 属性 : border-style (边框 样式 )、border-color (边框 颜色 ) 和 border-width (边框 
宽度)。 三 者 关系 比较 紧密 ， 如 果 没 有 定义 border-style 属性 ， 所 定义 的 border-color 和 border-width 属 
性 是 无 效 的 ， 反 之， 如 果 没 有 定义 border-color 和 border-width 属性 ， 定 义 border-style 也 是 没有 用 。 

| 不 同 浏览 器 为 border-width 设置 了 默认 值 (默认 为 medium 关键 字 )。medium 关键 字 大 约 等 于 2 
| 像素 一 3 像素 〈 视 不 同 浏览 器 而 定 )， 另 外 还 包括 thin (1 像素 一 2 像素 ) 关键 字 和 thick (3 像素 一 5 
| 像素 ) 关键 字 。 

| border-color 默认 值 为 黑色 。 当 为 元 素 定义 border-style 属性 ， 则 浏览 器 能 够 正常 显示 边框 效果 。 

| border-style 属性 取 值 比较 多 ， 详 细 说 明 请 参考 CSS 参考 手册 。 

” 容 提示 : solid 属性 值 是 最 常用 的 ， 而 dotted、dashed 也 是 常用 样式 .double 关键 字 比 较 特 殊 ， 它 定 
| 义 边框 显示 为 双 线 ， 在 外 单线 和 内 单线 之 间 是 一 定 宽度 的 间距 。 其中， 内 单线 、 外 单线 和 
间距 之 和 必须 等 于 border-width 属性 值 。 


| 【示例 】 下 面 示例 比较 当 border-style 属性 设置 不 同 值 时 所 呈现 出 的 效果 ， 在 下 和 Firefox 浏览 
”器 解析 的 效果 如 图 14.4 和 图 14.5 所 示 。 


<style type="text/css"> 

#p1 { border-style:solid; } /# 实 线 效果 所 
#p2 { border-style:dashed:; } 此 虚线 效果 */ 
#p3 { border-style:dotted; } /# 点 线 效果 */ 
#p4 { border-style:double; } 诊 双 线 效果 *#/ 
#p5 { border-style:groove; } 人 #3D 四 槽 效果 村 
#p6 { border-style:ridge: } 谍 3D 凸 横 效 果 */ 
#p7 { border-style:inset: } 府 3D 止 边 效果 村 
#p8 { border-style:outset: } 谍 3D 是 边 效果 */ 
</style> 


<p id="pl"> 元 1 { border-style:solid; }</p> 


i 
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<p id="p2">#p2 { border-style:dashed:; }</p> | 
<p id="p3">#p3 { border-style:dotted:; }</p> 
<p id="p4">#p4 { border-style:double; }</p> 
<p id="p5">#p5 { border-style:groove; }</p> 


<p id="p6">#p6 { border-style:ridge; }</p> 仿 自 
<p id="p7">#p7 { border-style:inset; }</p> I 
<p id="p8">#p8 { borderstyle:outset }</p> Note 


SE Er 
pi {border-style:solid; } ] 


p4 {border style:double; ) 
p5{ border-style:groove; } 
#p6 { border-style:ridge; } 


D8 { border-style.outset: ) | 


图 14.4 正 浏 览 器 下 边框 边框 样式 显示 效果 图 14.5 Firefox 浏览 器 下 边框 边框 样式 显示 效果 


14.1.5 “定义 补 白 


使 用 CSS 的 padding 属性 可 以 定义 补 白 ， 它 用 来 调整 元 素 包含 的 内 容 与 元 素 边框 的 距离 。 从 功能 

上 讲 ， 补 白 不 会 影响 元 素 的 大 小 ,但 是 由 于 在 布局 中 补 白 同 样 占据 空间 ， 所 以 在 布局 时 应 考虑 补 白 对 | 
于 布局 的 影响 。 如 果 在 没有 明确 定义 元 素 的 宽度 和 高 度 情况 下 ， 使 用 补 白 来 调整 元 素 内 容 的 显示 位 置 | 
| 


要 比 边界 更 加 安全 、 可 靠 。 
padding 与 margin 属性 一 样 ,不 仅 快 速 简写 ,还 可 以 利用 padding-top、padding-right、padding-bottom | 
和 padding-left 属性 来 分 别 定义 四 边 的 补 白 大 小 。 | 
【示例 1】 下 面 示例 设计 段落 文本 左 侧 空 出 4 个 字体 大 小 的 距离 , 此 时 由 于 没有 定义 段落 的 宽度 ， | 
所 以 使 用 padding 属性 来 实现 会 非常 恰当 ， 如 图 14.6 所 示 。 | 


<style type="text/css"> 
PT 
border: solid lpx red; 让 边框 样式 */ 
padding-left: 4em:; 诺 左 侧 补 白 */ 
} 
</style> 


<p> 今 天 很 残酷 ， 明 天 更 残酷 ， 后 天 很 美好 ， 但 绝 大 部 分 是 死 在 明天 晚上 ， 所 以 每 个 人 不 要 放弃 今天 。</p> 


| 
5 | 

© EF Fy | 
| 


本 更 艾 酷 ， 百 天 很 于 寻 ， 三 
人 是 死 在 明天 晚上 ， 所 以 每 个 人 不 要 


图 14.6 补 白 影响 文本 在 段落 中 的 显示 位 置 | 


Rs 
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， 岩 提示 : 由 于 补 白 不 会 发 生 重 奏 ， 当 元 素 没有 定义 边框 的 情况 下 ， 以 padding 属性 来 蔡 代 margin 
属性 来 定义 元 素 之 间 的 间距 是 一 个 比较 不 错 的 选择 。 

久 由 于 行内 元 素 定义 的 width 和 height 属性 值 无 效 ， 所 以 可 以 利用 补 白 来 定义 行内 元 素 的 高 度 和 宽 

天 度 以便 能 够 排 开行 内 元 素 。 


【示例 2】 下 面 示例 使 用 padding 属性 定义 行内 元 素 的 显示 高 度 和 显示 宽度 ， 如 图 14.7 所 示 ， 如 
1 果 没 有 定义 补 白 ， 会 发 现行 内 元 素 的 背景 图 缩小 到 隐藏 状态 ， 如 图 14.8 所 示 。 
| <style type="text/css"> 
af 
background-image: url(images/back.png); 人 * 定义 背景 图 妆 
background-repeat: no-repeat; /# 禁止 背景 平 铺 */ 
padding: Slpx; 启 通过 补 白 定义 高 度 和 宽度 */ 
line-height: 0; 谨 设置 行 高 为 0*/ 
display: inline-block:; 话 行内 块 显示 */ 
text-indent: -999px; /#* 隐藏 文本 */ 
8 
</style> 


<a href="#" title=" 返 回 "> 返回 </a> 
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图 14.7 使 用 补 白 来 定义 元 素 的 显示 高 度 和 宽度 图 14.8 没有 补 白 的 情况 下 的 显示 效果 
14.2 设计 浮动 显示 


| 浮动 是 一 种 特殊 的 显示 方式 ， 它 能 够 让 元 素 向 左 或 向 右 停 靠 显 示 ， 是 在 传统 CSS 布局 中 用 来 设 
| 计 多 栏 并 列 版 式 的 主要 方法 ， 主 要 针对 块 元 素来 说 的 ， 因 为 CSS 布局 主要 使 用 块 元 素 ， 而 内 联 元 素 、 
sg 内 联 块 元 素 本 身 就 可 以 实现 左右 对 齐 、 并 列 显示 。 


14.2.1 定义 float 


视频 讲解 | 使 用 CSS 的 float 属性 可 以 定义 元 素 浮动 显示 ， 用 法 如 下 所 示 。 
| float:none | left | right 


默认 值 为 none， 取 值 说 明 如 下 。 
回 none: 设置 对 象 不 浮动 。 
left: 设置 对 象 浮 在 左边 。 


.274 . 


A 
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right: 设置 对 象 浮 在 右边 。 

当 该 属性 不 等 于 none 引起 对 象 浮动 时 ， 对 象 将 被 视 作 块 对 象 ， 相 当 于 声明 了 display 属性 等 于 
block。 也 就 是 说 , 浮动 对 象 的 display 特性 将 被 忽略 。 该 属性 可 以 被 应 用 在 非 绝对 定位 的 任何 元 素 上 。 | 

【示例 1】 在 页 面 中 设计 3 个 盒子 ， 统 一 大 小 为 200 像素 X100 像素 ， 边 框 为 2 像素 宽 的 红线 。 | 会 内 
在 默认 状态 下 ， 这 3 个 盒子 以 流动 方式 堆 大 显 示 ， 根 据 结构 的 排列 顺序 自 上 而 下 进行 排列 。 二 3 


如 果 定义 3 个 盒子 都 向 左 浮动 ， 则 3 个 盒子 并 列 显示 在 一 行 ， 如 图 14.9 所 示 。 
<style type="text/css"> 
div {/* <div> 标 签 基本 样式 */ 
width: 200px; 人 # 固定 宽度 */ 
height: 300px; /# 固定 高 度 */ 
border: solid 2px red; 人 # 边框 样式 *#/ 
margin: 4px; 人/# 增加 外 边界 */ 
div { float: left; }/* 定义 所 有 <div> 标 签 都 向 左 浮动 显示 */ 
</style> 


<div id="boxl"> 盒 子 1</div> 

<div id="box2"> 盒 子 2</div> 

<div id="box3"> 盒 子 3</div> 

如 果 不 断 缩小 窗口 宽度 , 会 发 现 随 着 窗口 宽度 的 缩小 ， 当 窗口 宽度 小 于 并 行 浮动 元 素 的 总 宽度 之 
和 时 ， 会 自动 换行 显示 ， 如 图 14.10 所 示 。 


图 14.9 并列 浮动 图 14.10 错位 浮动 
< 注意 ; 当 多 个 元 素 并 列 浮动 时 ,浮动 元 素 的 位 置 是 不 固定 的 , 它们 会 根据 父 元 素 的 宽度 灵活 调整 。 
这 为 页 面 布局 带 来 隐患。 


解决 方法 : 定义 包含 框 的 宽度 为 固定 值 ， 避 免 包含 框 的 宽度 随 窗口 大 小 而 改变 。 例 如 ， 以 上 面 示 
例 为 基础 ， 如 果 定 义 body 元 素 宽 度 固 定 ， 此 时 会 发 现 无 论 怎么 调整 窗口 大 小 都 不 会 出 现 浮动 元 素 错 
位 现象 ， 如 图 14.11 所 示 。 


body { 

width: 636px; 必 固定 父 元 素 的 宽度 */ 

border: solid 1px blue; 旋 为 父 元 素 定义 边框 ， 以 便 观 察 */ 
中 


【示例 2】 设计 3 个 盒子 以 不 同方 向 进行 浮动 , 则 它们 还 会 遵循 上 述 所 列 的 浮动 显示 原则 。 例 如， 
定义 第 1、2 个 盒子 向 左 浮动 ， 第 3 个 盒子 向 右 浮动 ， 如 图 14.12 所 示 。 


pS 
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#box1, #box2 { float left; 证 向 左 浮动 */}》 
#box3 { float: right: 人 # 向 右 浮动 *#/} 
€ » Er Er 
Note 


图 14.11 不 错位 的 浮动 布局 图 14.12 浮动 方向 不 同 的 布局 效果 


如 果 取 消 定 义 浮动 元 素 的 大 小 , 会 发 现 每 个 盒子 都 会 自动 收缩 到 仅 能 包含 对 象 的 大 小 。 这 说 明 浮 
| 动 元 素 有 自动 收缩 空间 的 功能 ， 而 块 状元 素 就 没有 这 个 特性 ， 在 没有 定义 宽度 的 情况 下 ， 宽 度 会 显示 
| 为 100%6。 

【示例 3】 如 果 浮 动 元 素 内 部 没有 包含 内 容 ， 这 时 元 素 会 收缩 为 一 点 ， 如 图 14.13 所 示 。 但 是 对 于 

下 浏览 器 的 怪异 模式 来 说 ， 则 会 收缩 为 一 条 紧 线 ， 这 是 因为 正 浏览 器 有 默认 行 高 ， 如 图 14.14 所 示 。 


<style type="text/css"> 

div{ 
border: solid 2px red; 上 # 边框 样式 所 
margin: 4px; 从 增加 外 边界 */ 
float: left: 人 # 向 左 浮动 */} 


: 
Sr EE EECERG EC 


图 14.13 正 浏 览 器 的 标准 模式 下 浮动 自动 收缩 为 点 ”图 14.14 正 浏览 器 的 怪异 模式 下 浮动 收缩 为 一 条 竖 线 


窟 ”提示 :元素 洋 动 显示 之 后 ， 它 会 改变 显示 顺序 和 位 置 ， 但 是 不 会 脱离 文档 流 ， 其 前 面 对 象 的 大 小 
| 和 位 置 发 生变 化 ， 也 会 影响 浮动 元 素 的 显示 位 置 。 


14.2.2 使 用 clear 


| float 元 素 能 够 并 列 在 一 行 显示 ， 除 了 可 以 通过 调整 包含 框 的 宽度 ， 来 强迫 浮动 元 素 换行 显示 外 ， 
| 还 可 以 使 用 clear 属性 ， 该 属性 能 够 强迫 浮动 元 素 换行 显示 ， 用 法 如 下 所 示 。 
| clear:none | left | right | both 


TGs 
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默认 值 为 none， 取 值 说 明 如 下 。 
none: 允许 两 边 都 可 以 有 浮动 对 象 。 
both: 不 允许 有 浮动 对 象 。 
left: 不 允许 左边 有 浮动 对 象 。 | 会 内 
right: 不 允许 右边 有 浮动 对 象 。 一 一 
【示例 】 下 面 示例 定义 3 个 盒子 都 向 左 浮动 ， 然 后 定义 第 2 个 盒子 清除 左 侧 浮动 ,这样 它 就 不 能 
够 排列 在 第 1 个 盒子 的 右 侧 ， 而 是 换行 显示 在 第 1 个 盒子 的 下 方 , 但 是 第 3 个 盒子 由 于 没有 设置 清除 ， 
属性 ， 所 以 它 会 向 上 浮动 到 第 1 个 盒子 的 右 侧 ， 如 图 14.15 所 示 。 | 


<style type="text/css"> 

div{ 
width: 200px; /# 固定 宽度 */ 
height: 200px; 证 固定 高 度 */ 
border: solid 2px red; 谨 边框 样式 所 
margin: 4px; /# 边界 距离 */ 
float: left; /# 向 左 浮动 */} 

#box2 { clear: left; } /# 清除 向 左 浮动 *#/ 

</style> 

<div id-"boxl"> 盒 子 1</div> 

<div id="box2"> 盒 子 2</div> 

<div id="box3"> 盒 子 3</div> 


如 果 定义 第 2 个 盒子 清除 右 侧 浮动 ， 会 发 现 它们 依然 显示 在 一 行 ， 如 图 14.16 所 示 。 说 明 在 第 2 
个 盒子 在 解析 时 ， 第 3 个 盒子 还 没有 出 现 ， 因 此 当 第 3 个 盒子 浮动 显示 时 ， 不 会 受到 clear 影响 。 


图 14.15 为 第 2 个 盒子 定义 清除 左 侧 浮动 对 象 图 14.16 ”为 第 2 个 盒子 定义 清除 右 侧 浮动 对 象 
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定义 也 是 一 种 特殊 的 显示 方式 ， 它 能 够 让 元 素 脱离 文档 流 ， 实 现 相 对 偏 移 ， 或 者 精准 显示 。 
14.3.1 定义 position 


使 用 CSS 的 position 属性 可 以 定义 元 素 定位 显示 ， 用 法 如 下 所 示 。 
Position:static | relative | absolute | fixed 


a 
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默认 值 为 static， 取 值 说 明 如 下 所 示 。 
回 static: 无 特殊 定位 ， 对 象 遵循 正常 文档 流 。top、right、bottom、left 等 属性 不 会 被 应 用 。 
回 relative: 对 象 遵循 正常 文档 流 ， 但 将 依据 top、right、bottom、left 等 属性 在 正常 文档 流 中 偏 


食 生 移 位 置 。 
回 absolute:， 对 象 脱离 正常 文档 流 ， 使 用 top、right、bottom、left 等 属性 进行 绝对 定位 ， 其 层 
JVote 程 顺序 通过 z-index 属性 定义 。 


| 加 ”fixed: 对 象 脱离 正常 文档 流 ,使 用 top、right、bottom、left 等 属性 以 窗口 为 参考 点 进行 定位 ， 
当 出 现 滚动 条 时 ， 对 象 不 会 随 之 滚动 。 
与 position 属性 相关 联 的 是 4 0 
回 top: 设置 对 象 与 其 最 近 一 个 定位 包含 框 项 部 相关 的 位 置 。 
加 right: 设置 对 象 与 其 最 近 一 个 证 位 包 洁 本 有 达 相关 的 位 置 

回 bottom: 设置 对 象 与 其 最 近 一 个 定位 包含 框 底部 相关 的 位 置 。 

回 left: 设置 对 象 与 其 最 近 一 个 定位 包含 框 左 侧 相关 的 位 置 。 

上 面 4 个 属性 值 可 以 是 长 度 值 ， 或 者 是 百分比 值 ， 可 以 为 正 ， 也 可 以 为 负 。 当 取 负 值 时 ， 向 相反 
方向 信 移 ， 默认 值 都 为 auto。 
| 【示例 1】 下 面 示例 定义 3 个 盒子 都 为 绝对 定位 显示 ， 并 使 用 left、right、top 和 bottom 属性 定义 
元 素 的 坐标 ， 显 示 效 果 如 图 14.17 所 示 。 

<style type="text/css"> 

body {padding: 0; /* 兼容 非 正 浏览 器 */margin: 0; ”/* 兼容 焉 浏览 器 */} /* 清除 页 边 距 */ 


div { 
width: 200px; /# 固定 元 素 的 宽度 *#/ 
height: 100px; 旋 固定 元 素 的 高 度 */ 
border: solid 2px red; 此 边框 样式 */ 
position: absolute; /# 绝对 定位 */ 
} 
| #boxl { 
| left: 50px; /# 距 离 左 侧 窗 口 距离 50 像素 */ 
top: 50px; 必 距离 顶部 窗口 距离 50 像素 */ 
} 
#box2 { left: 40%; } 庆 距离 左 侧 窗口 距离 为 窗口 宽度 的 40% */ 
#box3 { 
right: SOpx: 雍 距离 右 侧 距离 50 像素 */ 
| bottom: 50px 上 # 距离 底部 距离 50 像素 */ 
| 
| </style> 


| <div id="boxl"> 盒 子 1</div> 

| <div id="box2"> 盒 子 2</div> 

| <div id-"box3"> 盒 子 3</div> 

| 全 注意 : 在 定位 布局 中 ， 有 一 个 很 重要 的 概念 ， 即 定位 包含 框 。 定位 包含 框 不 同 于 结构 包含 框 ， 它 
| 定义 了 所 包含 的 绝对 定位 元 素 的 坐标 参考 对 象 。 凡 是 被 定义 相对 定位 、 绝 对 定位 或 固定 定 
| 位 的 元 素 都 会 拥有 定位 包含 框 的 功能 。 如 果 没 有 明确 指定 定位 包含 框 ， 则 将 以 body 作为 
| 定位 包含 框 ， 即 以 窗口 四 边 为 定位 参照 系 。 
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图 14.17 相对 于 窗口 定位 元 素 


【示例 2】 在 示例 1 的 基础 上 ， 把 第 2、 第 3 个 盒子 包裹 在 <div id="wrap"> 标 签 中 ， 然 后 定义 <div 
id="wrap"> 标 答 相 对 定位 (position:relative;)， 于 是 它 就 拥有 了 定位 包含 框 的 功能 ， 此 时 第 2、 第 3 个 
盒子 就 以 <div id="wrap"> 四 边 作为 参考 系统 进行 定位 ， 效 果 如 图 14.18 所 示 。 


<style type="text/css"> 
body {padding: 0; /* 兼容 非 正 浏览 器 */ margin: 0; 。 * 兼 容 下 浏览 器 */} /* 清除 页 边 距 */ 
div{ 
width: 200px; 话 固定 元 素 的 宽度 所 
height: 100px: 旋 固定 元 素 的 高 度 */ 
border: solid 2px red:; 颇 边框 样式 */ 
position: absolute; /# 绝对 定位 *#/ 
#boxl { 
left: S0px; /# 距离 左 侧 窗 口 距离 50 像素 */ 
top: S0px: # 距离 顶部 窗口 距离 50 像素 */ 
} 
#box2 { left: 40%; } 上 # 距离 左 侧 窗口 距离 为 窗口 宽度 的 40% */ 
#box3 { 
right: 50px: 上 距离 右 侧 距离 50 像素 */ 
bottom: 50px 此 距离 底部 距离 50 像素 */ 


! 
#wrap {/* 定义 定位 包含 框 */ 


width:300px; 族 定义 定位 包含 框 的 宽度 */ 
height:200px; 谨 定义 定位 包含 框 的 高 度 所 
float:right; 庆 定义 定位 包含 框 向 右 浮动 */ 
margin:100px; 此 包含 块 的 外 边界 所 
border:solid 1px blue: 启 边框 样式 *#/ 
position:relative; 谍 相对 定位 */ 

} 

</style> 

<div id="boxl"> 盒 子 1</div> 

<div id="wrap"> 


<div id="box2"> 盒 子 2</div> 
<div id="box3"> 盒 子 3</div> 
</div> 


Os 
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14.18 ”相对 于 元 素 进行 定位 


| 相对 定位 定义 元 素 在 文档 流 中 原始 位 置 进 行 偏 移 , 但 是 定位 元 素 不 会 脱离 文档 。 而 对 于 绝对 定位 
对 象 来 说 ， 定 位 元 素 完全 脱离 文档 流 ， 两 者 就 不 再 相互 影响 。 

| 使 用 相对 定位 可 以 纠正 元 素 在 流动 显示 中 位 置 偏差 ， 以 实现 更 恰当 地 显示 。 

| 【示例 3】 在 下 面 示例 中 ， 根 据 文档 流 的 正常 分 布 规律 ， 第 1、 第 2、 第 3 个 盒子 按 顺序 从 上 到 
下 进行 分 布 ,下面 设 计 第 1 个 盒子 与 第 2 个 盒子 的 显示 位 置 进行 调换 ， 为 此 使 用 相对 定位 调整 它们 的 


显示 位 置 ， 实 现 的 代码 如 下 ， 所 得 的 效果 如 图 14.19 所 示 。 


<style type="text/css"> 
div{ 
width: 400px: /# 固定 宽度 显示 */ 
height: 100px: 必 固定 高 度 显示 */ 
border: solid 2px red; 谍 边框 样式 */ 
margin: 4px; /# 外 边界 距离 */ 
| position: relative; /# 相对 定位 类 
| } 
#boxl { top: 108px: } 上 # 向 下 偏 移 显示 位 置 *#/ 
| #box2 { top: -108px; } 上 # 向 上 偏 移 显示 位 置 */ 
</style> 
<div id="boxl"> 盒 子 1</div> 
<div id="box2"> 盒 子 2</div> 
<div id="box3"> 盒 子 3</div> 


© ET pr em psc] snnonerrs BE 


度 子 1 


(a) 默认 显示 位 置 (b) 对 倒 之 后 显示 位 置 
图 14.19 ”使 用 相对 定位 调换 模块 的 显示 位 置 
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相对 定位 更 多 地 被 用 来 当 作 定位 包含 框 ， 因 为 它 不 会 脱离 文档 流 。 另 外 ， 全 用 相 对 定位 可 以 人 太 
便 地 微调 文档 流 中 对 象 的 位 置 偏差 。 

固定 定位 就 是 定位 坐标 系统 始终 是 固定 的 ， 即 始终 以 浏览 器 窗口 边界 为 参照 物 进行 定位 。 | 

【示例 4】 下 面 示 例 是 对 上 面包 含 块 演示 示例 的 修改 ， 修 改 其 中 的 3 个 盒子 的 定位 方式 为 固定 定 | 
位 ， 这 时 在 浏览 器 中 预览 ， 你 会 发 现 包含 块 不 再 有 效 ， ER TAN 
的 位 置 ， 如 图 14.20 所 示 。 


EE 


<style type="text/css"> | 

div { | 
width: 200px; /* 固定 元 素 的 宽度 */ | 
height: 100px: /* 固定 元 素 的 高 度 */ | 
border: solid 2px red; 谍 边框 样式 *#/ | 
position: fixed; 谍 固定 定位 */ 

} 

#boxl { 
left: S0px; /# 距离 左 侧 窗口 距离 50 像素 */ 
top: SOpx; /# 距离 顶部 窗口 距离 50 像素 */ 


} 
#box2 { left: 40%; } 


/# 距离 左 侧 窗 口 距 离 为 窗口 宽度 的 40% */ 


#box3 { 
right: 50px; 上 # 距离 右 侧 距离 50 像素 */ 
bottom: 50px /# 距离 底部 距离 50 像素 */ 


} 
#wrap {/* 定义 定位 包含 框 */ 


width: 300px; 上 # 定义 定位 包含 框 的 宽度 */ 
height: 200px; 谍 定义 定位 包含 框 的 高 度 */ 
float: right; 庆 定义 定位 包含 框 向 右 浮动 */ 
margin: 100px; /# 包含 块 的 外 边界 */ 
border: solid 1px blue; 此 边框 样式 所 
position: relative; 人 # 相对 定位 所 

</style> 

<div id=-"boxl"> 盒 子 1</div> 

<div id="wrap"> 


<div id="box2"> 盒 子 2</div> 

<div id="box3"> 盒 子 3</div> 

</div> | 

容 提示 : 在 定位 布局 中 ， 如 果 left 和 right、top 和 bottom 同时 被 定义 ， 则 le 人 t 优 于 right，top 优 于 
bottom。 但 是 如 果 元 素 没 有 被 定义 宽度 和 高 度 ， 则 元 素 将 会 被 拉 伸 以 适应 左右 或 上 下 同 贱 | 

定位 。 

【示例 5】 在 下 面 示例 中 ， 分 别 为 绝对 定位 元 素 定义 left、right、top 和 bottom 属性 ， 则 元 素 会 被 | 

自动 拉 伸 以 适应 这 种 4 边 定位 的 需要 ， 演 示 效 果 如 图 14.21 所 示 。 


<style type="text/css"> 

#boxl { | 
border: solid 2px red; 旋 边框 样式 *#/ | 
position: absolute; 谍 绝对 定位 */ 
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left: 50px; 上 # 左 侧 距 离 */ 
| right: 50px: 上 # 右 侧 距离 */ 
| top: SOpx; 习 顶部 距离 志 / 
sx bottom: 50px: 上 # 底部 距离 */ 
| | 
‘Note <div id-"boxl"> 盒 子 1</div> 


图 14.21 4 边 同时 定位 元 素 的 位 置 


“14.3.2 ”设置 层 琶 顺序 

视频 讲解 不 管 是 相对 定位 、 固 定 定位 ， 还 是 绝对 定位 ， 只 要 坐标 相同 都 可 能 存在 元 素 重 伙 现象。 在 默认 情 
| 况 下 ， 相 同类 型 的 定位 元 素 ， 排 列 在 后 面 的 定位 元 素 会 覆盖 前 面 的 定位 元 素 。 
| 【示例 1】 在 下 面 示例 中 ，3 个 盒子 都 是 相对 定位 ， 在 默认 状态 下 它们 将 按 顺序 覆盖 显示 ， 如 
图 14.22 所 示 。 


| <style type="text/css"> 

| div{ 

| width: 200px; 必 固定 宽度 */ 
| height: 100px; 让 固定 高 度 */ 
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border: solid 2px red; 虑 边框 样式 *#/ 
position: relative; 谍 相对 定位 */ | 
} | 
#box1 { background: red: } /#* 第 1 个 盒子 红色 背景 */ | 
#box2 { 证 第 2 个 盒子 样式 */ | 全 
left: 60px; 旋 左 侧 距 离 */ | Ne 
top: -50px; 上 # 顶部 距离 */ 
background: blue; /# 蓝 色 背景 */ | Note 
) 
#box3 {l* 第 3 个 盒子 样式 */ | 
left: 120px; /# 左 侧 距离 */ 
top: -100px; /# 顶部 距离 */ 
background: green; /#* 绿色 背景 所 
} 
</style> 


<div id="box1"> 盒 子 1</div> 
<div id="box2"> 盒 子 2</div> 
<div id="box3"> 盒 子 3</div> | 
使 用 CSS 的 z-index 属性 可 以 改变 定位 元 素 的 覆盖 顺序 。z-index 属性 取 值 为 整数 , 数值 越 大 就 越 | 
显示 在 上 面 。 | 
【示例 2】 在 示例 1 的 基础 上 ， 分 别 为 3 个 盒子 定义 z-index 属性 值 ， 第 1 个 盒子 的 值 最 大 , 所 | 
以 它 就 层 车 在 最 上 面 ， 而 第 3 个 盒子 的 值 最 小 ， 而 被 登 放 在 最 下 面 ， 如 图 14.23 所 示 。 | 
#boxl] {z-index:3;} 
#box2 { z-index:2:; } 
#box3 { z-index:1; } 


图 14.22 默认 层 秋 顺序 图 14.23 ”改变 层 合 顺序 


如 果 z-index 属性 值 为 负 值 ， 则 将 隐藏 在 文档 流 的 下 面 。 | 
【示例 3】 在 下 面 示例 中 ， 定 义 <div> 标 签 相对 定位 ， 并 设置 z-index 属性 值 为 -1， 显 示 效 果 如 | 
图 14.24 所 示 。 


<style type="text/css"> 

#boxl { | 
height 400px: /# 固定 高 度 所 | 
position: relative; 人 # 相对 定位 */ | 
background: red url(images/1.jpg): /# 定义 背景 色 和 背景 图 */ | 
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Z-index: -1: /# 层 全 顺序 */ 
top: -120px; 访 偏 移 位 置 ， 实 现 与 文本 */} 
</style> 


| <p> 我 永远 相信 中 要 永 不 放弃 ， 我 们 还 是 有 机 会 的 。 最后， 我们 还 是 坚信 一 点 ， 这 世界 上 只 要 有 梦想 ， 只 要 
优 7 ”不 断 努 力 ， 只 要 不 断 学 习 ， 不管 你 长 得 如 何 ， 不 管 是 这 样 ， 还 是 那样 ， 男 人 的 长 相 往往 和 他 的 才华 成 反比 。 今 天 
~ 很 残酷 ， 明 天 更 残酷 ， 后 天 很 美好 ， 但 绝对 大 部 分 是 死 在 明天 晚上 ， 所 以 每 个 人 不 要 放弃 今天 。</p> 

Note <div id="box1"></div> 
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图 14.24 定义 定位 元 素 显示 在 文档 流下 面 
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| CSS 布局 比较 复杂 ,为 了 帮助 用 户 快速 入 门 ， 本 节 通 过 几 个 案例 介绍 网 页 布局 的 基本 思路 、 方法 
加 | 和 技巧 。 当 然 ， 要 设计 精美 的 网 页 ， 不 仅仅 需要 技术 ， 更 需要 一 定 的 审美 和 艺术 功底 。 


| 14.4.1 设计 两 栏 页 面 


视频 讲解 | 本 案例 版 式 设计 导航 栏 与 其 他 栏目 并 为 一 列 固定 在 右 侧 ， 主 栏目 以 弹性 方式 显示 在 左 侧 ， 实 现 主 
| 栏 自 适应 页 面 宽度 变化 ， 而 侧 栏 宽度 固定 不 变 的 版 式 效果 ， 结 构 设计 如 图 14.25 所 示 。 


IE id="container"> 


[ 记 ae | (%) 
| we | (%) 
| se | 


记 “页 肢 区 域 (%) | 
</div> 


图 14.25 ”版 式 结构 示意 图 


设计 思路 ， 如 果 完全 使 用 浮动 布局 来 设计 主 栏 自 适应 、 侧 栏 固定 的 版 式 是 存在 很 大 难度 的 ， 因 
， 百分比 取 值 是 一 个 不 固定 的 宽度 ， 让 一 个 不 固定 宽度 的 栏目 与 一 个 固定 宽度 的 栏目 同时 浮动 在 一 
”内 ， 采 用 简单 的 方法 是 不 行 的 。 

这 里 设计 主 栏 10096 宽 度 ， 然 后 通过 左 外 边 距 取 负 值 强迫 栏目 偏 移出 一 列 的 空间 ， 最 后 把 这 个 脆 
”出 的 区 域 让 给 右 侧 浮动 的 侧 栏 ， 从 而 达到 并 列 浮动 显示 的 目的 。 
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当主 栏 左 外 边 距 取 负 值 时 ， 可 能 部 分 栏目 内 容 显 示 在 窗口 外 面 ， 为 此 在 嵌 套 的 子 元 素 中 设置 左 外 | 
边 距 为 父 包 含 框 的 左 外 边 ey 这 样 就 可 以 把 主 栏 内 容 控制 在 浏览 器 的 显示 区 域 。 | 


【操作 步骤 】 
(1) 新 建文 档 ， 保 存 为 testhtml。 
(2) 设计 文档 基本 结构 ， 包 含 5 个 模块 。 
<div id="container"> Note 
<div id="header"> | 
<h1> 页 眉 区 域 <h1> 
</div> 
<div id="wrapper"> 
<div id="content"> 
<p><strong>1. 主 体内 容 区 域 </strong></p> 
</div> 
</div> 
<div id="navigation"> 
<p><strong>2. 导 航 栏 </strong></p> 
</div> 
<div id="extra"> 
<p><strong>3. 其 他 栏目 </strong></p> 
</div> 
<div id="footer"> 
<p> 页 脚 区 域 </p> 
</div> 
</div> 


(3) 使 用 <style> 定 义 内 部 样式 表 ， 输 入 下 面 样式 代码 ， 设 计 效 果 如 图 14.26 所 示 。 
div#wrapper {/* 主 栏 外 框 */ 


float: left; 谍 向 左 浮动 *#/ 
width: 100%; 上 # 弹性 宽度 所 
margin-left: -200px # 左 侧 外 边 距 ， 负 值 向 左 缩 进 */ 
} 
div#content {/* 主 栏 内 框 */ 
margin-left: 200px 皮 左 侧 外 边 距 ， 正 值 填充 缩 进 */ 
} 
div#navigation {/* 导航 栏 */ 
float: right; /# 向 右 浮动 */ 
width: 200px 旋 固定 宽度 */ 
} 
div#extra {l* 其 他 栏 */ 
float: right; /# 向 右 浮动 *#/ 
clear: right; /# 清除 右 侧 浮动 ， 和 避免 同行 显示 */ | 
width: 200px 放 固定 宽度 所 | 
} | 
div#footer {/* 页 眉 区 域 所 | 
clear: both; 话 清除 两 侧 浮动 ， 强 迫 外 框 撑 起 */ | 
width: 100% 
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图 14.26 设计 固 宽 + 自 适应 两 栏 页 面 
EE 4.2 设计 三 栏 页 面 


| 本 案例 的 基本 思路 : 首先 定义 主 栏 外 包含 框 宽度 为 100%， 即 占据 整个 窗口 。 然 后 再 通过 左右 外 

| 边 距 来 定义 两 侧 空白 区 域 ， 预 留 给 侧 栏 占用 。 在 设计 外 边 距 时 ， 一 侧 采 用 百分比 单位 ， 另 一 侧 采 用 像 
| 素 为 单位 ， 这 样 就 可 以 设计 出 两 列 宽度 是 弹性 的 ， 另 一 列 是 固定 的 。 最 后 再 通过 负 外 边 距 来 定位 侧 栏 
| 的 显示 位 置 ， 设 计 效 果 如 图 14.27 所 示 。 


div#wrapper {/* 主 栏 外 包含 框 基本 样式 */ 


float: left; /# 向 左 浮动 */ 
| width: 100% /# 百分比 宽度 所 
| 
| div#content {/* 主 栏 内 包含 框 基 本 样式 */ 
| margin: 0 33% 0 200px 庆 定义 左右 两 侧 外 边 距 ， 注 意 不 同 的 取 值 单位 */ 
| 加 村 
divwfnavigation {/* 导航 栏 包含 框 基本 样式 */ 
| float: left: 率 向 左 浮动 所 
| width: 200px; # 固定 宽度 *#/ 
| margin-left: -100% 入 左 外 边 距 取 负 值 进行 精确 定位 */ 
| 
| div#extra {l* 其 他 栏 包含 框 基本 样式 */ 
| float: left: 此 向 左 浮动 *#/ 
| width: 3396: /百分比 宽度 */ 
margin-left: -33% 人 # 左 外 边 距 取 负 值 进行 精确 定位 */ 


} 
也 可 以 让 主 栏 取 负 外 边 距 进行 定位 ， 其 他 栏 自然 浮动 。 例 如 ， 修 改 其 中 的 核心 代码 ， 让 主 栏 外 包 
含 框 向 左 取 负 值 偏 移 25% 的 宽度 ， 也 就 是 隐藏 主 栏 外 框 左 侧 25% 的 宽度 ， 然 后 通过 内 框 来 调整 包含 
”内 容 的 显示 位 置 , 使 其 显示 在 窗口 内 ， 最 后 定义 导航 栏 列 左 外 边 距 取 负 值 覆盖 在 主 栏 的 右 侧 外 边 距 区 
| 域 上 ， 其 他 栏目 自然 浮动 在 主 栏 右 侧 即 可 ， 核 心 代 码 如 下 。 


div#wrapper {/* 主 栏 外 包含 框 基本 样式 */ 
margin-left: -25% 人 # 左 外 边 距 取 负 值 进行 精确 定位 */ 


div#content {/* 主 栏 内 包含 框 基本 样式 */ 


| 
margin: 0 200px 0 25% 上 # 定义 左右 两 侧 外 边 距 ， 注 意 不 同 的 取 值 单位 */ 
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} | 
divhnavigation {/* 导航 栏 包 含 框 基本 样式 */ | 
margin-left: -200px 旋 左 外 边 距 取 负 值 进行 精确 定位 */ | 


由 
div#extra {/* 其 他 栏 包含 框 基本 样式 */ 
width: 25% 上 # 百分比 宽度 *#/ 


设计 效果 如 图 14.28 所 示 ， 其 中 中 间 导 航 栏 的 宽度 是 固定 的 ， 主 栏 和 其 他 栏 为 弹性 宽度 显示 。 
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图 14.28 设计 两 列 弹性 一 列 固定 版 式 的 布局 效果 
14.5 在 线 练 习 
本 节 分 多 个 专题 练习 CSS3 的 布局 方法 、 特 性 和 应 用 技巧 ， 感 兴趣 的 同学 可 以 扫 码 练习 。 
回味 二 
在 线 练习 
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安装 PHP 运行 环境 


PHP 是 应 用 最 广泛 的 网 站 开发 语言 ,与 Linux、Apache、MySQL 紧密 结合 ， 形 成 LAMP 
的 开源 黄金 组 合 ， 这 不 仅 降低 了 用 户 的 使 用 成 本 ， 还 提升 了 开发 速度 ， 使 得 PHP 软件 工程 
师 成 为 一 个 发 展 迅速 的 职业 。PHP 运行 环境 需要 安装 的 组 件 包括 如 下 


是 
Ph 
dl 
dl 
dl 


Apache 服务 器 模块 

PHP 程序 执行 模块 
MySQL 数据 库 服务 器 模块 
PHP 开发 工具 (可 选 ) 

MySQL 数据 库 管 理工 具 ( 可 选 ) 


【 学 习 重 点 】 


ad 
ml 
Lad 


了 解 PHP 特性 
了 解 PHP 相关 学 习 资 源 
安装 PHP 工具 包 
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15.1 PHP 概述 


PHP 是 一 种 HTML 内 嵌 式 的 语言 ， 与 微软 的 ASP 颇 有 几 分 相似 ， 都 是 一 种 在 服务 器 端 执行 的 、 
嵌入 HIML 文档 的 脚本 语言 ， 语 言 的 风格 类 似 于 C 语言 ， 语 法 混合 了 C、Java、Perl, 以 及 PHP 自 | Note 
创 的 很 多 新 语法 。 | 


15.1.1 PHP 的 特性 


PHP 与 Apache 服务 器 紧密 结合 ， 加 上 它 不 断 更 新 ， 即 时 加 入 各 种 新 功能 ， 支 持 所 有 主流 和 非 主 | 
流 数 据 库 ， 再 加 上 超 高 的 执行 效率 ， 使 得 PHP 快速 流行 。PHP 包括 如 下 主要 特性 。 | 
开放 的 源 代码 : 事实 上 所 有 的 PHP 源 代码 都 可 以 得 到 。 

PHP 是 免费 的 。 

基于 服务 器 端 ， PHP 运行 在 服务 器 端 ， 可 以 运行 在 UNIX、Linux、Windows 下 。 

嵌入 HIML: 因为 PHP 可 以 嵌入 HIML 语言 ， 所 以 学 习 起 来 并 不 困难 。 

简单 的 语言 : PHP 坚持 脚本 语言 为 主 ， 与 Java 和 C++ 不 同 。 

效率 高 : PHP 消耗 相当 少 的 系统 资源 。 

能 够 处 理 图 像 : 使 用 PHP 能 够 在 网 页 中 动态 创建 图 像 。 


15.1.2 PHP 的 应 用 
PHP 的 应 用 范围 很 广泛 ， 例 如 ， 网 站 开发 、 游 戏 开 发 、 广 告 系统 开发 、API 接 口 开发 、 移 动 端 后 | 


台 开发 、 内 部 OA 系统 开发 、 服 务 器 端 开发 等 。 如 图 15.1 所 示 是 PHP 应 用 的 简单 分 类 说 明 , 当然 PHP 
应 用 的 宽度 和 深度 都 不 止 于 此 。 


图 图 图 图 图 图 图 


邢 飞 茵 洲 dHd 
其 到 融 悍 队 带 
IND9 油 叶 膏 漳 


; 互 售 || 总 || 四 || [| 路 || 防 
襄 SI|lo 
基 加 || 庄 || 益 || 符 || 妆 || 羡 | 号 [| 总 || 潍 | 各 [| 类 
系 系 理 | | 众 | | 流 | | 金 | | 体 || 戏 | | 器 || 培 
统 统 | | 时 系 | | 敬 || 量 | | 总 || 验 || 网 | | 管 || 管 
代 统 || 圣 || 统 | | 最 | | 亚 | | 站 | | 理 | | 理 
外 台 || 计 || 务 || 台 页 | | 页 
状 管 | | 系 | | 平 面 | | 面 
理 理 || 统 || 台 
| 有 
及 号 || 全 
国 四 
色 


图 15.1 PHP 应 用 分 类 
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吕 [网 交 设 计 与 网 站 妹 设 从 入 门 到 精通 ( 微 课 精 编 版 ) 


首先 , 它 适合 开发 政府 、 企 业 、 公 司 门 户 网 站 的 内 容 管理 系统 , 国内 较 流行 的 有 DedeCMS、phpCMS 


和 帝国 CMS 等 ; 论坛 系统 一 般 多 选用 Discuz， 开 发 网 上 商城 可 以 选择 Ecshop 等 系统 ， 开 发 博客 可 以 


| 选择 Wordpress。PHP 开源 产品 很 多 ， 一 般 都 使 用 PHP 框架 技术 ， 这 里 不 再 一 一 列举 。 


然后 ， 是 各 种 类 型 的 Web 应 用 管理 软件 ， 如 贸易 公司 和 其 下 属 销售 中 心 使 用 的 分 销 系统 等 。 另 
外 一 类 是 定制 型 、 功 能 型 和 工具 型 的 网 站 ， 类 似 CNZZ 网 站 的 访问 统计 ; 还 有 就 是 硬件 配置 页 面 ， 如 
路 由 器 配置 管理 页 面 等 。 
国内 外 大 多 知名 网 站 都 使 用 PHP， 例 如 ， 国 外 的 Facebook、Yahoo、 维 基 百 科 、apple.com， 国 内 
的 新 浪 微 博 、 百 度 贴吧 、 淘 宝 搜索 、 天 猫 网 站 首页 、 腾 讯 朋 友 网 、 当 当 网 、 美 丽 说 、 
蘑菇 街 、 多 玩 网 、 虎 牙 游戏 直播 、 战 旗 游 戏 直播 等 。 


15.1.3 开发 工具 


PHP 开发 工具 很 多 ， 常 用 工具 有 Dreamweaver、SublimeText、Notepad++、phpStorm、 
Zend Studio 等 。 这 里 推荐 使 用 Zend Studio， 它 是 专业 PHP 集成 开发 环境 ， 对 PHP 支持 比较 完善 。 
有 基础 的 同学 也 可 以 根据 个 人 使 用 习惯 选用 其 他 开发 工具 。 这 里 给 出 更 详细 的 说 明 , 感 兴趣 的 同 
学 可 以 扫 码 了 解 。 


15.1.4 PHP 参考 手册 
不 仅 对 于 初学 者 而 言 ， 即 便 是 PHP 编程 高 手 ， 都 应 随时 备用 一 本 PHP 参考 手册 。 其 作用 不 言 而 


回 时 
线 上 阅读 


| 喻 ，PHP 函数 包罗 万 象 ， 有 上 千 个 之 多 ， 各 种 技术 细节 甚 多 ， 一 般 人 不 可 能 都 记 在 大 脑 中 。 访 问 官网 


| http://php.net/， 可 以 在 线 查阅 PHP 各 种 参考 资料 ， 具 体 说 明 如 下 。 


可 以 在 本 地 随时 检索 和 查阅 ， 使 用 更 为 方便 ， 如 图 15.2 所 示 。 


回 PHP 函数 : http://php.net/manual/zh/funcref.php。 

回 PHP 安装 与 配置 : http://php.net/manual/zh/install.php。 
回 PHP 语言 参考 : http://php.net/manual/zh/langref.php。 
回 PHP 安全 : http://php.net/manual/zh/security.php。 

回 PHP Web 开发 : http://php.net/manual/zh/features.php。 
建议 初学 者 下 载 PHP 手册 CHM 版 本 ， 下 载 地 址 是 http://www.php.net/download-docs.php。 这 样 


EB 
文件 由 坊 党 E) 可 看 MV) 寺 到 [6)。 笃 了 (H) 
弹 加 个 4 二 
二 


2 2 
as0 | ey | may | sano | 


PHP, "PHP: Hypertext Preprocessor”, 
适用 于 Web 开发 并 可 或 入 HTML 中 去 ， 吻 该 
语言 的 主要 目标 星 旬 许 web 开 发 人 员 但 PHP 的 用 泛 远 
不 只 于 此 


本 手册 内 容 主要 由 醒 数 参考 构成 ”但 也 包含 了 语言 参 旁 ，PHP 一 些 主要 产品 特点 的 党 明 
内 


可 在 shttpy php.net/download-docs.php 下 载 此 手册 的 各 种 格 亏 -更 多 关于 如 何 开 
发 本 手册 的 信息 可 参阅 附录 : "基于 相手 机"。 如 有 果 你 对 PHP 的 矶 史 感 兴趣， 可 访问 相关 


图 15.2 PHP 参考 手册 
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15.1.5 ”网 上 资源 


PHP 网 上 资源 非常 多 ， 读 者 在 百度 搜索 PHP 关键 词 ， 会 发 现 海 量 信息 。 为 了 减轻 二 和 二 | f 
初学 者 的 检索 负担 ， 下 面 推荐 几 个 国内 较 热 的 PHP 技术 网 站 ， 仅 供 学 习 参考 。 | 食 - 
PHP 官网 ， http://www.php net， 了 解 PHP 权威 信息 。 | 
PHP 中 文 社区 : http://www.phpchina.com/，PHP 技术 学 习 与 交流 。 Note 
PHP 开源 社区 : https://www.oschina.net/project/lang/22/php， 了 解 各 种 开源 项 目 。 | 
A5 源码 : http://down.admin5.com/php/， 下 载 PHP 源 代码 。 类 似 还 有 源码 之 家 等 网 站 。 

PHP 中 文 网 ，http://www.php.cn/， 提 供 大 量 PHP 初学 教程 。 

PHP100 中 文 网 ，http://www.php100.com/， 提 供 大 量 PHP 学 习 资 源 。 | 
当 跨 越 初学 门槛 之 后 ， 读 者 不 妨 再 涉猎 更 广 、 更 专业 的 PHP 资源 ， 这 里 为 大 家 整理 一 份 资源 清 | 
单 ， 感 兴趣 的 同学 可 以 扫 码 参考 。 | 


轿 因 图 图 图 加 


15.2 安装 Apache+PHP+MySQL 工具 包 


安装 PHP 运行 环境 的 最 简便 方法 就 是 使 用 工具 包 。 工具 包 将 Apache、PHP、MySQL 等 模块 的 安 
装 和 配置 打包 为 一 个 安装 程序 ， 或 者 一 个 压缩 包 ， 功 能 类 似 于 克隆 盘 。 用 户 只 需要 单 击 安装 ， 或 者 将 | 
压缩 包 解压 到 本 地 即 可 使 用 ， 非 常 方便 。 | 


15.2.1 认识 PHP 工具 包 


目前 ,网 上 有 很 多 PHP 环境 配置 工具 包 , 如 PHPStudy、AppServ、EasyPHP、XAMPP、 Wamp Server、 | 
Vertrigo Server、PHPNow 等 。AppServ、PHPStudy 和 EasyPHP 都 是 Apache+PHP+MySQL 开发 环境 ， 
适合 初学 者 选用 ， 而 XAMPP 等 工具 相对 复杂 些 ， 适 合 有 一 定 基础 的 用 户 选 用 。 | 


涯 提示 : 在 安装 工具 包 之 前 ， 建 议 不 要 单独 安装 Apache、PHP 或 MySQL。 如 果 已 经 安装 ， 应 先 拆 | 
务 它们 ， 吉 免 出 现 各 种 配置 冲突 。 


15.2.2 安装 AppServ 工具 包 


下 面 以 AppServ 工具 包 为 例 介绍 如 何在 Windows 中 快速 搭建 PHP 环境 。 
【操作 步骤 】 | 
(1) 访问 AppServ 官网 ， 下 载 AppServ 工具 包 (http://www.appservnetwork.com/)。 这 里 下 载 的 ， 

是 AppServ 8.4.0 版 本 ， 包 括 如 下 版 本 模块 。 

回 。 Apache 2.4.20。 

回 PHP 5.6.22。 

回 PHP7.0.7。 

回 MySQL 5.7.13。 

回 phpMyAdmin 4.6.2。 | 
(2) 双击 下 载 到 本 地 的 appserv-win32-8.4.0.exe 文件 ， 打 开 如 图 15.3 所 示 的 AppServ 启动 界面 。 
(3) 单 击 Next 按钮 ， 打 开 如 图 15.4 所 示 的 AppServ 安装 协议 界面 。 L 
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License 


Agreement 
Welcome to the AppServ 8.4.0 Please review the lcense terms before instaling AppServ 8.4.0. 


Setup Wizard 


Press Page Down to see the rest of the agreement 


This wizard wil guide you through the instalation of AppServ 
.4.0. 


GNU LESSER GENERAL PUBLIC LICENSE 


that you dose all other Verson 2.1, February 1999 
Th wl 


(Copyright (C) 1991, 1999 Free Software Foundation, 
9 Tenple Place, Sdte 330, boston MA O2111-: es USA 
and distribute verbat 


copy， 
mae oament Dt dongng te not aowed 
Donald ao oe 
5 the: Public License, version 2, 
2 


OF 


v 


ppSery 


CGOMPUTES 


Wyoa soot he tar of te opener dik Mroe 得 G Ya mat ooopt the 
agreement to nstal AppServ 8.4.0, 


Bock | 1Agee | | Canc 


图 15.3 启动 AppServ 图 15.4 接受 安装 协议 


| (4) 单 击 I Agree 按钮 ， 打 开 如 图 15.5 所 示 的 对 话 框 ， 在 该 对 话 框 中 设置 安装 路 径 ， 默 认 路 径 
| 为 CAppServ，AppServ 安装 完毕 ，Apache、PHP 和 MySQL 都 将 以 子 目 录 的 形式 存储 在 该 目录 下 。 
| (5) 单 击 Next 按钮 ， 打 开 如 图 15.6 所 示 的 对 话 框 ， 在 该 对 话 框 中 选择 要 安装 的 程序 和 组 件 ， 

| 默认 为 全 部 选中 状态 。 


the components you want to instal, dear the components 
rte 


图 15.5 选择 安装 路 径 图 15.6 选择 安装 的 组 件 


| (6) 单 击 Next 按钮 ， 打 开 如 图 15.7 所 示 的 对 话 框 ， 在 该 对 话 框 中 设置 Apache 服务 的 端口 号 ， 
以 及 计算 机 的 名 称 和 用 户 邮 箱 。 其 中 服务 器 端口 号 设置 非常 重要 ， 只 有 正确 设置 端口 号 ， 才 能 够 启动 
Apache 服务 器 ， 默 认为 80。 如 果 80 被 IS 或 者 其 他 网 络 程序 占用 〈 如 迅雷 、QQ 等 )， 则 需要 修改 相 
应 的 端口 号 ， 或 者 停 用 相 冲突 的 网 络 程序 。 

| (7) 单 击 Next 按钮 ， 打 开 如 图 15.8 所 示 的 对 话 框 ， 在 该 对 话 框 中 设置 MySQL 数据 库 的 root 
| 用户 登录 密码 和 数据 库 字符 集 。 这 里 设置 字符 集 为 中 文 简体 ， 这 样 就 可 以 在 MySQI 数据 库 中 采用 中 
| 文 简体 字符 集 读 写 数据 。 注 意 ， 所 设置 的 数据 库 登 录 密 码 一 定 要 记 牢 ， 因 为 在 应 用 程序 开发 中 ， 只 有 
使 用 该 密码 才能 够 访问 数据 库 ， 这 里 设置 密码 为 11111111， 在 后 面 程序 开发 中 ， 统 一 使 用 11111111 为 数 
据 库 访问 密码 。 

(8) 单 击 Install 按钮 ， 打 开 如 图 15.9 所 示 的 对 话 框 ， 显 示 安 装 进度 ， 开 始 安装 工具 包 中 选中 的 
| 程序 。 
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Wsoft Install System V2, SE 


图 15.7 设置 端口 号 图 15.8 设置 数据 库 登录 密码 
(9) 安装 完毕 ， 显 示 如 图 15.10 所 示 的 对 话 框 ， 按 默认 设置 ， 单 击 Next 按钮 ， 然 后 按 要 求 完成 


nstalhng 作恶 Ste Components 
Please wait while AppServ 8.4.0 5 being mstaled Select the components you want to install, dear the components 
you do not want to instal, 


Nulsoft Instal System v2,50 


15.9 ”显示 安装 进度 15.10 ”完成 安装 


(10) 安装 完毕 ,在 CAppServ 目录 下 可 以 看 到 5 个 子 文件 夹 ， 它 们 分 别 对 应 Apache 24、MySQL、 
php5、php7 和 www, 如 图 15.11 所 示 。 读者 可 以 把 所 有 测试 网 页 文件 存储 到 C:\AppServwww 目录 下 。 


ER 
”个 古本 地 贡生 (CG) AppSev ~ G， 本 于 Appierv 
修 E 期 


BB Apache24 201617118 2137 
2016/7/18 2140 
2016/7/18 2138 
201617118 2138 


2016/7/18 21:40 
图 Uninstal-AppSserv840exe 2016/7/18 21:42 


图 15.11 查看 安装 目录 
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15.2.3 测试 环境 
在 浏览 器 地 址 栏 中 输入 http://localhost/ 或 者 http://127.0.01/， 如 果 能 够 打开 并 显示 如 图 15.12 所 示 
的 页 面 内 容 ， 则 说 明 安 装 AppServ 工具 包 成 功 。 


< > CIT Err 


The AppServ Open Project - 8.4.0 for Windows 
Now you running on PHP 5.6.22 


号 lyAdmin Database Manager Version 4.6.2 
PHP Information Version 


Abaut AppSery Version 8.4.0 for Windows 
AppServ Is a merging open source software installer package for Windows includes ; 


* ChangeLog 
* README 
* AUTHORS 
* COPYING 


Official Site : http://www.AppServ.org 
Hosting by : http://www.AppServHosting.com 


Change Language : S34 三 
» Easy way to build Webserver, Database Server with AppServ :-) 


图 15.12 测试 AppServ 
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PHP 基础 


PHP 是 一 种 嵌入 式 服务 器 端 编程 语言 ， 简 单 易学 ,快速 上 手 ， 它 具有 强 火 的 扩张 性 。 随 
着 PHP 开发 不 断 普 及 ， 越 来 越 多 的 初学 者 选择 PHP 作为 网 站 开发 的 首选 语言 。 本 章 主要 讲 
解 PHP 语言 的 基本 用 法 和 规范 ， 为 PHP 深入 编程 商定 基础 


【 学 习 重 点 】 

PHP 基本 语法 

PHP 数据 类 型 、 变 量 和 常量 
PHP 运算 人 符 和 表达 式 

PHP 控制 语句 

PHP 函数 

PHP 编码 规范 


至 豆 吾 吾 吾 至 
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16.1 PHP 基本 语法 
侠 


PHP 使 用 一 对 特殊 的 标记 包含 PHP 代码 ， 与 HTML 代码 混在 一 起 。 当 服务 器 解析 页 面 时 ， 能 


自动 过 滤 出 PHP 脚本 并 进行 解释 ， 最 后 把 生成 的 静态 网 页 传递 给 客户 端 。 
回 加 | 


16.1.1 PHP 标记 


一 般 情况 下 ，PHP 代码 都 被 嵌入 HIML 文档 中 ，PHP 代码 在 HTML 文档 有 4 种 存在 形式 ,简单 
| 说 明 如 下 。 

| 回 PHP 默认 风格 。 通 过 “<?php” 和 “?>” 标 记分 隔 PHP 代码 ， 例 如 : 

<2php 


# 这 里 是 PHP 代码 
?> 


【示例 】 利 用 这 种 风格 ， 可 以 在 HTML 文档 中 任意 混合 PHP 和 HTML 代码 。 


<?php if (Sexpression) { ?> 

<strong>$expression 变量 为 true.</strong> 

<?php } else { ?> 

<strong>$expression 变量 为 false.</strong> 

<2php } ?> 
| 上 面 代 码 能 够 正常 工作 ， 这 种 方法 对 于 输出 大 段 HTML 字符 串 而 言 ， 通 常 比 将 所 有 HTML 字符 
| 串 使 用 echo0 或 者 print0 方 法 输出 会 更 有 效率 。 
| 加 ”脚本 风格 。 通 过 <scrip 作 标签 包含 PHP 代码 ， 然 后 通过 language 属性 设置 脚本 语言 为 PHP， 

例如 : 
<script language="php"> 
## 这 里 是 PHP 代码 

</script> 

回 ”简写 风格 。 通 过 在 默认 风格 基础 上 去 掉 PHP 关键 字 ， 以 方便 快速 书写 代码 ， 例 如 : 

ET 


# 这 里 是 PHP 代码 
?> 
回 ”ASP 风格 。 通 过 “<%” 和 “9%>” 一 对 标记 分 隔 PHP 代码 ， 例 如 : 
<% 
# 这 里 是 PHP 代码 
| %> 
< 人 注意 :如 果 使 用 简写 风格 或 者 ASP 风格 ， 则 应 该 在 php.ini 配置 文件 中 修改 如 下 配置 ， 把 这 两 个 
| 参数 值 都 设置 为 Qn。 考虑 到 这 两 种 风格 的 移植 性 较 差 ， 通 常 不 推荐 使 用 。 
short_open tag = On 
asp_tags = On 
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当 开 发 需要 发 行 的 程序 或 者 库 ， 或 者 在 用 户 不 能 控制 的 服务 器 上 开发 PHP 程序 ， 因 为 目标 服务 | 
器 可 能 不 支持 短 标记 ， 为 了 代码 的 移植 或 发 行 ， 建 议 使 用 PHP 默认 风格 。 


16.1.2 PHP 注释 


PHP 支持 3 种 代码 注释 格式 ， 简 单 说 明 如 下 。 
回 ”CH 语言 风格 单行 注释 。 


<?php 

/这 里 是 PHP 注释 语句 
3 
回 “C 语言 风格 多 行 注释 。 
<?php 

/* 

PHP 代码 

多 行 注释 

#/ 


?> | 

多 行 注释 语法 格式 是 不 可 购 套 使 用 ， 所 有 被 包含 在 “/*” 和 “s/” 分 陋 符 内 的 字符 都 是 注释 信息 ， | 
将 不 被 解释 。 | 

回 Shell 语言 风格 注释 。 

<?php 

# 这 里 是 PHP 注释 语句 

> | 

在 单行 注释 中 ， 不 要 包含 “?>” 字 符 ， 否 则 服务 器 会 误 以 为 PHP 代码 结束 ， 因 此 停止 后 面 代码 | 
的 解释 。 | 
【示例 】 在 下 面 代码 中 ， 将 会 看 到 网 页 中 会 显示 多 余 的 字符 ， 如 图 16.1 所 示 。 


<?php 
echo "PHP 代码 !"” ”// 输出 字符 串 ?> 不 该 显示 的 注释 语句 
?> 


x 
Cale 和 nos/ocalhosts0 P -8 | EB ocalhost X 


!! 怀 该 显示 的 注释 语句 ?> 


图 16.1 错误 的 注释 语句 
16.1.3 PHP 指令 分 隔 符 


与 C、Perl 语言 一 样 ，PHP 使 用 分 号 来 结束 指令 ， 放 在 每 个 语句 后 面 。 | 
一 段 PHP 代码 的 结束 标记 隐 含 表示 一 个 分 号 。 因 此 ， 在 一 个 PHP 代码 段 最 后 一 行 ， 可 以 不 用 添 
加 分 号 表示 结束 。 如 果 后 面 还 有 新 行 ， 则 代码 段 的 结束 标记 包含 了 结束 指令 ， 例 如 : | 


| 
人 


0 


<?php 


| 或 者 
| <?php echo "这 是 一 行 命令 " ?> 

| 窟 提示: 在 文档 末尾 的 PHP 代码 段 , 结束 标记 可 以 不 要 。 在 某 些 情况 下 ， 当 使 用 include0 或 者 require0 
| 方法 时 ， 省略 结束 标记 会 更 有 利 。 这 样 文档 末尾 多 余 的 空格 就 不 会 显示 出 来 ， 之 后 仍然 可 
以 输出 响应 标 头 。 在 使 用 输出 缓冲 时 也 很 便利 ,就 不 会 看 到 由 包含 文件 生成 的 空格 ， 例 如 : 
<?php echo ' 这 里 省 略 了 结束 标记 '; 


16.2 PHP 数据 类 型 


PHP 支持 8 种 数据 类 型 。 包 括 4 种 标量 类 型 : boolean (布尔 型 )、integer ( 整 型 )、float ( 浮 点 型 ， 
| 也 称 为 double， 即 双 精 度 )、string (字符 串 )， 两 种 复合 类 型 array (数组 )、object (对 象 ); 两 种 特 
| 殊 类 型 resource〔 资 源 )、NULL ( 空 值 )。 


4 注意 ， PHP 变量 的 类 型 不 需要 声明 ，PHP 能 够 根据 该 变量 使 用 的 上 下 文 环境 在 运行 时 决定 ， 
16.2.1 标量 类 型 


| 标量 类 型 是 最 基本 的 数据 结构 ， 用 来 存储 简单 的 、 直 接 的 数据 ，PHP 
| 标量 类 型 包括 4 种， 简单 说 明 如 表 16.1 所 示 。 


表 16.1 标量 类 型 
类 型 说 了 明 
boolean (布尔 型 ) 最 简单 的 数据 结构 ， 仅 包含 两 个 值 ， 如 tue〈 真 )》 和 false〈 假 ) 
string (字符 串 ) 就 是 连续 的 字符 序列 ， 包 含 计算 机 所 能 够 表示 的 一 切 字符 的 集合 


integer( 整 型 ) 
float〔 浮 点 型 ) 


只 包含 整数 ， 包 括 正 整数 和 负 整 数 
包含 整数 和 小 数 


1. boolean (布尔 型 ) 
| 布尔 型 是 使 用 频率 最 高 的 数据 类 型 ， 也 是 最 简单 的 类 型 ， 在 PHP4 中 开始 引入 。 要 指定 一 个 布尔 
| 值 ， 可 以 使 用 关键 字 TRUE 或 FALSE， 这 两 个 值 不 区 分 大 小 写 。 设 置 变量 的 值 为 布尔 型 ， 则 直接 将 
| TRUE 或 FALSE 关键 字 赋值 给 变量 即 可 ， 例 如 : 


<?php 
$foo = True; // 设 置 变 量 $foo 的 值 为 真 


?> 
【示例 1】 通 常 利用 某 些 运算 符 返回 布尔 值 ， 来 控制 流程 方向 。 
<?php 


让 ($action 一 "show_version") { /一 是 一 个 操作 符 ， 它 检测 两 个 变量 是 否 相等 ， 并 返回 一 个 布尔 值 
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echo "The version is 1.23"; 


} 
?> 
忘 提示 下 面 用 法 是 没有 必要 的 。 | a 
1f ($show_separators == TRUE) { | | 
echo "<hr>\n"; 


可 以 使 用 下 面 这 种 简单 的 方式 表示 。 


if ($show_separators) { 
echo "<hr>\n"; 
} 


< 注意 : 在 PHP 中 ， 美 元 符号 $ 是 变量 的 标识 符 ， 所 有 变量 都 以 $ 字 符 开头 ， 无 论 是 声明 变量 , 还 | 
是 调用 变量 。 | 

2. 整 型 | 
整 型 数值 只 包含 整数 。 整 型 值 可 以 使 用 十 进 制 、 十 六 进 制 、 八 进 制 、 二 进 制 表示 ， 前 面 可 以 加 上 ， 
可 选 的 符号 -或 者 +)。 | 
【示例 2】 八 进 制 表示 数字 前 必须 加 上 0( 零 )， 十 六 进 制 表示 数字 前 必须 加 上 0x， 二 进 制 表示 ， 
数字 前 必须 加 上 0b。 | 


<?php 

$a = 1234; / 十进制 数 

$a = -123; 1/ 负数 

$a = 0123; // 八进制 数 〈 等 于 十 进 制 83) 
$a=0xlA; / 十 六 进 制 数 〈 等 于 十 进 制 26) 
$a = 0bl1111111; / 二 进 制 数 字 (等 于 十 进 制 255) 
> 


整 型 数值 的 字 长 与 平台 有 关 ， 通常 最 大 值 大 约 是 二 十 亿 (32 位 有 符号 )。64 位 平台 下 的 最 大 值 通 
常 是 大 约 9E18， 除 了 Windows 下 PHP7 以 前 的 版 本 ， 总 是 32 位 的 。 | 
可 以 使 用 常量 PHP_INT_MAX 来 表示 最 大 整数 ， 使 用 PHP_INT_MIN 表示 最 小 整数 。 


Ah 注意 ，PHP7 以 前 的 版 本 里 ， 如 果 向 入 进 制 数 传递 了 一 个 非法 数字 ( 即 8 或 9) ， 则 后 面 其 余数 
字 会 被 忽略 。PHP7 以 后 ， 会 产生 Parse Error 错误 ， 例 如 : 


<?php 
var_dump(01090); /PHP7 下 抛 出 异常 
> 


【示例 3】 如 果 给 定 的 一 个 数 超出 了 整数 范围 ， 将 会 被 解释 为 浮 点 数 。 同 样 如 果 执 行 的 运算 结果 

超出 了 整数 范围 ， 也 会 返回 浮 点 数 。 下 面 代码 演示 在 64 位 系统 下 的 整数 溢出 情况 。 

<?php 

Slarge_ number = 2147483647: 

var_dump(S$large_number); 1/ 输出 为 int(2147483647) 

S$million = 1000000; 

$large_ number = 50000000000000 * $million; 

var_dump($large_ number); // float(5.0E+19) 

2 
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3. 浮 点 型 

浮 点 数 也 称 为 双 精 度数 或 者 实数 ， 可 以 使 用 下 面 几 种 方法 定义 。 
<?php 

$a= 1.234; / 标注 格式 定义 

$b = 1.2e3; / 科学 记 数 法 格式 定义 
$c =7E-10; / 科学 记 数 法 格式 定义 
> 


4 注意 ， 溯 点 型 的 数值 只 是 一 个 近似 值 ， 应 过 锡 使 用 浮 点 型 数值 进行 大 小 比较 ， 因 此 浮 点 数 结果 精 


确 不 到 最 后 一 位 。 如 果 确 实 需要 更 高 的 精度 ， 应 该 使 用 任意 精度 数学 函数 或 者 gmp 函数 。 
例如 ， floor((0.1+0.7)*10) 通 常会 返回 7， 而 不 是 预期 中 的 8， 类 似 的 十 进 制 表 达 式 1/3 返回 值 为 0.3。 


， 次 提示 : NAN 是 一 个 特殊 的 浮 点 数 常 量 ， 它 表示 任何 未 定义 或 不 可 表述 的 值 ， 只 能 使 用 inan0 男 


数 可 以 检查 到 。 
感 兴趣 的 同学 可 以 扫描 右 侧 二 维 码 了 解 PHP 数学 函数 的 列表 说 明 。 


4. 字符 串 
字符 串 都 是 由 一 系列 的 字符 组 成 ， 一 个 字符 就 是 一 个 字 节 。 可 以 通过 单 引 号 、 双 引号 、heredoc 


| 语法 结构 和 nowdoe 语法 结构 (PHP 5.3.0 以 后 ) 定义 字符 串 。 


加 单 引号 
定义 一 个 字符 串 的 最 简单 的 方法 是 用 单 引 号 把 它 包围 起 来 。 如 果 想 要 输出 一 个 单 引号 ， 须 在 它 的 


| 前面 加 个 反 借 线 (\。 在 单 引号 前 或 在 字符 串 的 结尾 处 想 要 答 出 反 侠 线 ， 需 要 输入 两 条 (\)。 注 意 ， 
| 如 果 在 任何 其 他 的 字符 前 加 了 反 侠 线 ， 反 斜 线 将 会 被 直接 答 出 。 


【示例 4】 下 面 示例 演示 了 如 何 使 用 单 引号 定义 字符 串 。 


<2php 

echo 单行 字符 串 ' 

echo ' 多 行 

字符 串 ' 

echo "IVIL be back"': 1/ 输出 : "Tll be back" 

echo 'C:\*.*9' 1/ 输出 : C:\*.*? 

echo 'You deleted C:\*.*7": // 输出: You deleted C:\*.*? 

echo 'This will not expand: \n a newline'; // 输出 : This will not expand: \n a newline 
echo "Variables do not $expand Seither’; // 输出 : Variables do not Sexpand Seither 
?> 


在 单 引号 字符 串 中 的 变量 和 特殊 含义 的 字符 将 不 会 被 替换 ， 按 普通 字符 输出 ， 但 是 在 双 引 号 所 包 


含 的 变量 会 自动 被 蔡 换 为 实际 数值 。 


回 双 引 号 
如 果 字 符 串 是 包围 在 双 引号 〈") 中 ，PHP 将 对 一 些 特殊 的 字符 进行 解析 ， 这 些 特殊 都 要 通过 转 


， 文 符 来 显示 ， 常 用 转 义 字符 说 明 如 表 162 所 示 。 


表 16.2 常用 转 义 字符 


转 义 字符 输 出 
un 换行 (LF or 0x0A (10) in ASCIT) 
Yr 回 车 (CR or 0x0D (13) in ASCIT) 
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dc 


续 表 


水 平方 向 的 tab (HT or 0x09 (9) in ASCIT) 


WV 竖 直 方向 的 tab (VT or 0x0B (11) in ASCII) (since PHP 5.2.5) 辟 给 
¥ 换 页 (FF or 0x0C (12) in ASCIT) (since PHP 5.2.5) 二 
\ 反 狸 线 ‘Note 
YS 美金 dollar 标记 | 

v 双 引 号 | 
\[0-7]{1.3} 符合 该 表达 式 顺序 的 字符 串 是 一 个 八进制 的 字符 | 


\x[0-9A-Fa- 符合 该 表达 式 顺 序 的 字符 串 是 一 个 十 六 进 制 的 字符 


与 单 引号 字符 串 一 样 ， 如 果 输 出 上 述 之 外 的 字符 ， 反 斜 线 会 被 打印 出 来 。 

回 “heredoc 结构 | 

第 三 种 定义 字符 串 的 方法 是 用 heredoc 语法 结构 :<<<。 在 该 提示 符 后 面 ， 要 定义 个 标识 符 ， 然 | 
后 是 一 个 新 行 。 接 下 来 是 字符 串 本 身 ， 最 后 要 用 前 面 定义 的 标识 符 作 为 结束 标志 。 | 

结束 时 所 引用 的 标识 符 必 须 在 一 行 的 开始 位 置 , 而 且 标识 符 的 命名 也 要 像 其 他 标签 一 样 遵守 PHP | 
的 规则 :只 能 包含 字母 、 数 字 和 下 画 线 ， 并 且 不 能 用 数字 和 下 画 线 作为 开头 。 | 

【示例 $】 下 面 示例 演示 了 如 何 使 用 heredoc 结构 定义 字符 串 。 

<?php 

$str = <<<EOD 

Example of string 

spanning multiple lines 

using heredoc syntax. 

EOD; 

echo $str 

?> 


< 注意 ; 结束 标识 符 这 行 除了 可 能 有 一 个 分 号 (: ) 外 ， 绝 对 不 能 包括 其 他 字符 。 这 意味 着 标识 符 | 
不 能 缩 进 ， 分 号 的 前 后 也 不 能 有 任何 空白 或 Tabs 键 。 更 重要 的 是 ， 结 束 标识 符 的 前 面 必 ， 
须 是 个 被 本 地 操作 系统 认可 的 新 行 标签 ， 如 在 UNIX 和 Mac OS 义 系统 中 是 Wn ， 而 结束 标 
识 符 (可 能 有 个 分 号 ) 的 后 面 也 必须 跟 新 行 标签 。 | 


Heredoc 结构 就 像 是 没有 使 用 双 引 号 的 双 引 号 字符 串 ， 在 heredoc 结构 中 引号 不 用 被 替换 ， 但 是 | 
上 文中 列 出 的 字符 Cn 等 ) 也 可 使 用 。 变 量 将 被 葵 换 ， 但 在 heredoc 结构 中 字符 串 表达 复杂 变量 时 ， 
要 格外 小 心 。 
加 ”nowdoc 结构 | 
如 果 说 heredoc 结构 类 似 于 双 引 号 字符 串 ， 那 么 nowdoc 结构 就 是 类 似 于 单 引 号 字符 串 的 。nowdoc | 
结构 很 像 heredoc 结构 ， 但 是 nowdoc 不 进行 解析 操作 。 这 种 结构 很 适合 用 在 不 需要 进行 转 义 的 PHP 
代码 和 其 他 大 段 文本 。 | 
一 个 nowdoc 结构 也 用 和 heredoc 结构 一 样 的 标记 <<<， 但 是 跟 在 后 面 的 标识 符 要 用 单 引号 括 起 | 
来 ， 即 <<<EOD"。heredoc 结构 的 所 有 规则 适用 于 nowdoc 结构 ， 尤 其 是 结束 标识 符 的 规则 。 
【示例 6】 下 面 示例 演示 了 如 何 使 用 nowdoc 结构 定义 字符 串 。 


<?php | 
$str = <<<EOD' | 


人 
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| (CY) 
多 
Example of string 
spanning multiple lines 
Using nowdoc syntax. 
EOD: 

tf 


区 
CC 16.2.2 复合 类 型 


复合 类 型 包括 两 种 数据 : 数组 和 对 象 ， 简 单 说 明 如 表 16.3 所 示 。 
表 16.3 复合 类 型 


类 型 
array (数组 ) 
object (对 象 ) 


说 明 
一 组 有 序数 据 集 合 
对 象 是 类 的 实例 ， 使 用 new 命令 创建 


1. 数组 
| 数组 实际 上 是 一 个 有 序数 据 集合 。 在 数组 中 ， 每 个 数据 单元 被 称 为 元 素 ， 元 素 包括 索引 〈 键 名 ) 
| 和 值 两 部 分 。 元 素 的 索引 可 以 是 数字 或 字符 串 。 值 可 以 是 任意 数据 类 型 。 
| 【示例 1】 定 义 数组 的 语法 格式 有 多 种 ， 下 面 代码 演示 了 4 种 基本 定义 方法 。 
<?php 
/ 格式 1: 使 用 array0 函 数 
S$array = array( 
"foo" => "bar", 
"bar" => "foo", 


六 
/ 格式 2: 没有 键 名 的 索引 数组 
Sarray = array("foo", "bar", "hallo", "world"): 
1/ 格式 3: 数组 直接 量 
Sarray =[ 
"foo" => "bar", 
"bar" => "foo", 


, 
/ 格式 4: 有 键 名 的 索引 数组 直接 量 
Sarray = ["bar", "fo0"]: 


var_dump($array): 
Ts 


array0 函 数 能 够 接受 任意 数量 ， 用 逗号 分 隔 的 “ 键 (key) / 值 (value)” 对 ， 键 值 之 间 通 过 => 运 
条 键 (key) 可 以 是 一 个 整数 或 字符 串 ， 值 (value) 可 以 是 任意 类 型 的 数据 。 
可 以 通过 在 方 括号 内 指定 键 名 来 访问 数组 元 素 ， 或 者 给 数组 赋值 。 


Sarr[key] = value; 
在 后 面 章 节 中 我 们 将 专题 讲解 数组 ， 这 里 就 不 再 详细 展开 说 明 。 

| 2. 对 象 

对 象 是 面向 对 象 编程 的 基础 ， 在 PHP 中 使 用 new 语句 实例 化 一 个 类 ， 即 可 创建 一 个 对 象 。 
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【示例 2】 下 面 示例 定义 一 个 foo 类 ， 然 后 使 用 new 语句 获取 一 个 实例 对 象 。 


<?php 
class foo{ / 创建 一 个 类 | 

function do foo0 { Ef 

echo "Doing foo."; | 屋内 

} } Note 
S$bar = new foo; // 创建 对 象 | 
S$bar->do_foo(); // 调用 对 象 包含 的 函数 
?> 


16.2.3 ”特殊 类 型 
特殊 数据 类 型 包括 资源 和 空 值 两 种 ， 简 单 说 明 如 表 16.4 所 示 。 


表 16.4 ”特殊 类 型 
类 型 说 了 明 
resource (资源 ) 资源 也 称 为 句柄 ， 是 一 种 特殊 的 变量 ， 保 存 到 外 部 资源 的 一 个 引用 。 资 源 一 般 通 过 专门 的 
”| 函数 来 定义 和 使 用 
null ( 空 值 ) 特殊 的 值 ， 表 示 变 量 没有 值 ， 唯 一 的 值 是 null 
1. 资源 


资源 类 型 从 PHP4 开始 引进 ， 由 于 资源 类 型 变量 保存 有 为 打开 文件 、 数 据 库 连 接 、 图 形 画 布 区 域 

等 的 特殊 句柄 ， 因 此 将 其 他 类 型 的 值 转换 为 资源 类 型 没有 意义 。 | 
在 使 用 资源 时 ， 系 统 会 自动 启用 垃圾 回收 机 制 , 释放 不 再 使 用 的 资源 , 避免 占用 系统 资源 。 因此 ， | 

很 少 需要 手工 释放 内 存 。 | 
2. 空 值 | 
空 值 就 是 表示 该 变量 没有 设置 任何 值 ， 其 值 为 一 个 特殊 的 值 null， 该 值 不 区 分 大 小 写 ，null 和 

NULL 是 等 效 的 。 当 变量 被 赋予 空 值 ， 可 能 有 3 种 情况 : 变量 还 没有 被 赋值 ， 或 者 变量 被 主动 赋 null | 

空 值 ， 或 者 变量 被 unset0 函 数 处 理 过 ， 例 如 : | 
<?php 


Svar = NULL; 
?> 


将 一 个 变量 转换 为 null 类 型 ， 将 会 删除 该 变量 。 从 PHP4 开始 ，unsetO 函 数 就 不 再 有 返回 值 ， 


所 以 用 户 不 要 试图 获取 或 者 输出 unset()。 
使 用 is_null0 函 数 可 以 判断 变量 是 否 为 null， 该 函数 返回 值 为 布尔 值 ， 如 果 变 量 为 null， 则 返 
true， 否 则 返回 false， 而 unsetO 函 数 是 用 来 销毁 指定 的 变量 。 


16.2.4 ”类 型 转换 


虽然 PHP 是 一 种 弱 类 型 语言 ， 但 是 有 时 还 是 需要 用 到 类 型 转换 。 转 换 的 方法 非常 简单 ， 只 需要 
在 变量 前 面 加 上 用 括号 括 起 来 的 类 型 名 称 即 可 ， 具 体 说 明 如 表 16.5 所 示 。 


回 
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| SD 
表 16.5 类 型 强制 转换 
| 转换 操作 符 说 上 明 
| (bool)、(boolean) 转换 为 布尔 型 
会 和 i 转换 为 字符 中 
| (int)、(integer) 转换 为 整 型 
‘Note (float) 、(double)、(real) 转换 为 浮 点 数 
| (array) 转换 为 数组 
| (object) 转换 为 对 象 
| (unset) 转换 为 NULL 


| (binary)、b 前 组 转换 为 二 进 制 字符 串 
， 次 提 示 : 除了 使 用 强制 转换 外 ， 还 可 以 使 用 settype0 函 数 转 换 数据 类 型 ， 用 法 如 下 。 
bool settype ( mixed &$var , string $type ) 


第 一 个 参数 为 变量 名 ， 第 二 个 参数 值 为 要 转换 的 类 型 字符 串 ， 包 括 boolean、float、integer、 
string、 null、array、 object。 
settype() 函 数 返 回 值 为 布尔 值 ， 如 果 类 型 转换 成 功 ， 则 返回 true， 否 则 返回 false。 


【示例 】 输 入 下 面 代码 ， 然 后 运行 结果 如 图 16.2 所 示 。 


<?php 

Snum ='3.1415926abe'; / 声明 字符 串 变 量 

echo (integer)$num; / 把 变量 强制 转换 为 整 型 

echo '<p>"; 

echo $num:; / 输出 原始 变量 值 

echo '<p>"; 

echo settype($num, ‘float’); / 输出 把 变量 转换 为 浮 点 数 的 结果 
echo '<p>"; 

echo $num:; // 被 转换 为 浮 点 数 后 的 变量 值 

?> 


图 16.2 输出 数据 类 型 转换 


| 转换 为 布尔 值 
| 要 明确 地 将 一 个 值 转换 成 baolean， 应 该 使 用 bool 或 者 (boolean) 来 强制 转换 。 但 是 很 多 情况 下 不 需 


要 用 强制 转换 ， 因 为 当 运 算 符 、 函 数 或 者 流程 控制 结构 需要 一 个 boolean 参数 时 ， 该 值 会 被 自动 转换 。 
| 在 PHP 中， 并 不 是 false 才 是 假 的 ， 在 特定 上 下 文中 ， 下 面 boolean 值 也 被 认为 是 假 的 。 
回 0: 整 型 值 零 。 


0.0: 浮 点 型 值 零 。 
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"0": 字符 串 值 零 。 

m: 空白 字符 串 。 

空 数 组 : 不 包括 任何 元 素 的 数组 。 

空 对 象 : 不 包括 任何 成 员 变 量 的 对 象 〈 仅 PHP 4.0 适用 
特殊 类 型 NULL (包括 尚未 设 定 的 变量 ) 。 | 
从 没有 任何 标记 的 XML 文档 生成 的 SimpleXML 对 象 。 Note 
其 他 所 有 值 都 被 认为 是 tue (包括 任何 资源 )。 注 意 ，-1 和 其 他 非 零 值 (不 论 正 负 ) 一 样 ， 被 认 | 

为 是 真 ， 例 如 : | 


3 


加 图 图 图 图 加 


<2php 
var_dump((bool) ""); // bool(false) 
var_dump((bool) 1); // bool(true) 


me el) 
var_dump((bool) array()); « // bool(false) 
rm i /el 
?> 


2， 转换 为 整 型 | 
要 明确 地 将 一 个 值 转换 为 整 型 ， 可 以 使 用 (in0) 或 (integen) 强 制 转换 。 不 过 大 多 数 情 况 下 都 不 需要 
强制 转换 ， 因 为 当 运算 符 、 函 数 或 流程 控制 需要 一 个 整 型 参数 时 ， 值 会 自动 转换 。 还 可 以 通过 intvalO | 
函数 将 一 个 值 转换 成 整 型 。 | 
当 从 布尔 值 转换 整数 值 时 ，false 将 被 转换 为 0，true 将 被 转换 为 1。 当 从 浮 点 数 转换 成 整数 时 ， ， 
将 向 零 取 整 。 如 果 浮 点 数 超出 了 整数 范围 ， 则 结果 不 确定 ， 因 为 没有 足够 的 精度 把 浮 点 数 转换 为 确切 | 
的 整数 结果 ， 在 此 情况 下 没有 警告 ， 甚 至 没有 任何 通知 。 | 


< 注意 : 不 要 将 未 知 的 分 数 强制 转换 为 整数 型 ， 这 样 会 导致 不 可 预料 的 结果 ， 例 如 : 


echo (inb ( (0.1+0.7)* 10): 。”// 显示 7 
人 


3. 转换 为 字符 串 | 
一 个 值 可 以 通过 在 其 前 面 加 上 (string) 或 用 strval0 函 数 来 转变 成 字符 串 。 在 一 个 需要 字符 串 的 表达 | 
式 中 ， 字 符 串 会 自动 转变 。 例 如 ， 在 使 用 echo0 或 者 print0 函 数 时 ， 或 在 一 个 变量 和 一 个 字符 串 进行 
比较 时 ， 就 会 发 生 这 种 转变 类 型 。 
回 一 个 布尔 型 的 tme 值 被 转换 成 字符 串 "1"， 而 布尔 型 的 false 值 将 被 转换 成 "( 空 的 字符 串 ) 。 
这 种 转变 可 以 在 布尔 值 和 字符 串 之 间 随 意 进 行 。 | 
加 一 个 整数 或 浮 点 数 将 被 转变 为 数字 的 字面 样式 的 字符 串 ( 包 括 浮 点 数 中 的 指数 部 分 ) , 使 用 
指数 计数 法 的 浮 点 数 〈16.1E+6) 也 可 转变 。 | 
回 ”数组 转换 成 字符 串 "Array"， 因 此 ，echo0 和 print0 无 法 显示 出 数组 的 值 。 如 果 显 示 一 个 数组 | 
值 ， 可 以 用 echo $ar['foo] 这 种 结构 。 
回 ”资源 总 会 被 转变 成 "Resource id #1" 这 种 结构 的 字符 串 , 其 中 的 1 是 PHP 分 配给 该 资源 的 独特 
数字 。 
回 NULL 总 是 被 转变 成 空 的 字符 串 。 
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“16.2.5 ”检测 数据 类 型 
| PHP 内 置 了 众多 检测 数据 类 型 的 函数 ,可 以 根据 需要 对 不 同类 型 数据 进行 检测 , 判断 变量 是 否 属 


全 站 于 某 种 特定 的 类 型 ， 如 果 符合 则 返回 tme， 否 则 返回 false。 具 体 说 明 如 表 16.6 所 示 。 


表 16.6 ”数据 类 型 检测 函数 


| 检测 函数 说 了 明 

is_ bool0 检测 变量 是 否 为 布尔 值 类 型 

is_string() 检测 变量 是 否 为 字符 串 类 型 

is float() 检测 变量 是 否 为 浮 点 数 类 型 

is_double0 检测 变量 是 否 为 浮 点 数 类 型 

is_integer() 检测 变量 是 否 为 整 型 

is_int0 检测 变量 是 否 为 整 型 

is_null0 检测 变量 是 否 为 空 值 类 型 

is array() 检测 变量 是 否 为 数组 类 型 

is_object0 检测 变量 是 否 为 对 象 类 型 

is_numeric() 检测 变量 是 否 为 数字 ， 或 者 是 数字 组 成 的 字符 串 

【示例 】 下 面 示例 先 使 用 is_float0 函 数 检 测 变 量 是 否 为 浮 点 数 ， 然 后 根据 检测 返回 值 ， 即 时 进行 

| 提示 。 
| <?php 


$num = '3.1415926abc'; 
if(is float($num)) 
echo ' 变 量 Snum 是 浮 点 数 ! ' 
else 
echo ' 对 不 起 ， 变 量 Snum 不 是 浮 点 数 ! 
?> 


16.3 PHP 变量 和 常量 


变量 包含 普通 变量 、 可 变 变量 和 预定 义 变量 ， 常 量 包 括 普 通常 量 和 预定 义 常量 。 下 面 分 别 进行 介绍 。 
“16.3.1 使 用 变量 


| “变量 就 是 内 存 中 一 个 命名 单元 ,系统 为 程序 中 每 个 变量 分 配 一 个 存储 单元 ,在 这 些 存储 单元 中 可 
以 存储 任意 类 型 的 数据 。 

| PHP 不 要 求 先 声明 、 后 使 用 变量 。 只 需要 为 变量 赋值 即 可 ,但 是 PHP 变量 的 名 称 必须 使 用 $ 字 符 
”作为 前 级 ， 变 量 名 称 区 分 大 小 写 。 


全 注 意 ; 在 PHP4 之 前 是 需要 先 声 明 变量 的 。 
”为 变量 赋值 ， 可 以 使 用 = 运算 符 实现 ， 等 号 左 侧 为 变量 ， 右 侧 为 所 赋 的 值 ， 例 如 : 
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<?php 
Snum = '3.1415926abe'; 
?> 


变量 名 不 能 够 以 数字 、 特 殊 字符 开头 。 除 了 直接 赋值 外 ， 还 可 以 使 用 如 下 方法 为 变量 赋值 。 会 内 
加 一 是 变量 之 间 相互 赋值 ， 例 如 : ees 
<?php Note 
Snum] ='3.1415926'; | 
$num2 = $numl ; 


echo Snum?2; 1/ 显示 '3.1415926' 
ye 


< 全 注意 : 变量 之 间 赋 值 ， 只 是 传递 值 ， 变 量 在 内 存 中 的 存储 单元 还 是 各 自 独 立 的 ， 互 不 干扰 。 
回 ”二 是 引用 赋值 ， 即 使 用 & 运 算 符 定义 引用 。 
容 提示: 从 PHP4 开始 ，PHP 引入 了 引用 赋值 的 概念 ， 就 是 用 不 同 的 名 称 访问 同一 个 变量 的 内 容 ， 
当 改变 其 中 一 个 变量 的 值 时 ， 另 一 个 变量 的 值 也 跟着 发 生变 化 。 


【示例 】 在 下 面 示例 中 ，$num2 引用 $numl， 修 改 $numl 变量 的 值 ， 则 $num2 变量 的 值 也 随 之 发 
生变 化 。 


<?php 

$numl ='3.1415926'; 

$num2 = &$num!] ; // 引用 变量 Snuml 

Snum] = 'string'; // 修改 变量 Snum1l 的 值 

echo Snum?2; // 显示 变量 Snum2 的 值 也 被 更 改 为 字符 串 'string' 
?> 


16.3.2 ”取消 引用 


当 不 需要 引用 时 ， 可 以 使 用 unset0 函 数 来 取消 变量 引用 。 才能 并 各 与 可 用 的 内 之 | 视频 讲解 
间 的 联系 ， 而 不 是 销毁 变量 内 容 ， 例 如 : 


<?php 

$a= 1; 

$b = &$a; / 定义 引用 
echo $b; / 显示 1 
unset($b); / 取消 引用 
echo $b; / 显示 空 
> 


16.3.3 ”可 变 变 量 


可 变 变量 是 一 种 特殊 的 变量 ， 它 允许 动态 改变 变量 的 名 称 ， 也 就 是 说 ， 该 变量 的 名 称 由 另外 一 个 “时 


| 视频 讲解 
变量 的 值 来 确定 。 定 义 可 变 变量 的 方法 是 在 变量 前 面 添加 一 个 $ 符 号 ， 例 如 : | 
<?php | 
$a= "be / 声明 变量 8a， 该 变量 的 值 为 字符 串 b | 
SDE 2: / 声明 变量 Sb， 该 变量 的 值 为 数字 2 本 
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So 


echo $a; / 显示 变量 $a 的 值 
echo $8a; / 通过 可 变 变量 输出 变量 $b 的 值 2 


| ?> 
全 办 | 有 时 候 使 用 可 变 变量 名 是 很 方便 的 ， 例 如 : 


| <?php 
Note $a = ‘hello'; 
| $$a = "world'; 
echo "$a ${$a}"; 
echo "$a $hello"; 
?> 


在 上 面 示例 中 , 可 变 变 量 $$a 的 名 称 可 以 是 变量 $a 的 值 ,可 以 直接 使 用 变量 $a 的 值 来 引用 可 变 变 
， 量 ， 并 获取 它 的 值 。 其 中 {$a} 表 达 式 表示 获取 变量 9a 的 值 ， 因 此 ${$a} 和 S$hello 所 表达 的 意思 是 相同 
， 的， 都 表 示 可 变 变量 9$a 的 一 个 名 称 。 

16.3.4 预定 义 变量 

PHP 提供 了 大 量 的 预定 义 变量 , 通过 这 些 预定 义 变量 可 以 获取 用 户 会 话 、 用户 操作 环境 和 本 地 操 
| 作 系统 等 信息 。 由 于 许多 变量 依赖 于 运行 的 服务 器 的 版 本 和 设置 及 其 他 因素 ， 所 以 并 没有 详细 的 说 明 
| 文档。 一 些 预定 义 变量 在 PHP 以 命令 行 形式 运行 时 并 不 生效 。 常 用 预定 义 变量 说 明 如 表 16.7 所 示 。 
| 表 16.7 PHP 常用 预定 义 变量 


预定 义 变量 说 了 明 
SGLOBALS 引用 全 局 作用 域 中 可 用 的 全 部 变量 
$_SERVER 服务 器 和 执行 环境 信息 
$_GET HTTP GET 变量 
$_POST HTTP POST 变量 
$_FILES HTTP 文件 上 传 变 量 
$ REQUEST HTTP Request 变量 
$ SESSION Session 变量 
$_ENV, 环境 变量 
$_COOKIE HTTP Cookies 
S$php_ errormse 前 一 个 错误 信息 
SHTTP RAW POST DATA 原生 POST 数据 
Shttp response header HTTP 响应 头 
Sarge 传递 给 脚本 的 参数 数目 
Sargv 传递 给 脚本 的 参数 数组 


16.3.5 声明 常量 


常量 可 以 理解 为 值 不 变 的 量 。 常 量 值 被 定义 后 ， 在 脚本 执行 期 间 都 不 能 改变 ， 或 者 取消 定义 。 
常量 名 和 其 他 任何 PHP 标签 遵循 相同 的 命名 规则 ， 即 由 英文 字母 、 下 画 线 和 数字 组 成 ， 但 数字 
， 不 能 作为 首 字母 出 现 。 

| 在 PHP 中 声明 常量 有 如 下 两 种 方法 。 
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1. 使 用 define0 函 数 

使 用 define0 函 数 来 定义 常量 ， 有 具体 语法 格式 如 下 。 
bool define( string $name , mixed $value [, bool $case_insensitive = false ] ) 
该 函数 包含 3 个 参数 ， 详 细 说 明 如 下 。 | 
回 name: 2 和 ‘Note 
回 value: 常量 的 值 。 值 的 类 型 必须 是 integer、float、string、boolean、NULL 或 array。 | 

加 ”case_insensitive: 可 选 参数 ， 如 果 设 置 为 tue， 该 常量 则 大 小 写 不 敏感 。 默认 是 大 小 写 敏感 | 

的 。 如 CONSTANT 和 Constant 代表 了 不 同 的 值 。 | 

声明 常量 成 功 后 ， 将 返回 tue， 否 则 将 返回 false。 

【示例 1】 下 面 示例 演示 如 何 定 义 一 个 普通 常量 ， 常 量 名 为 CONSTANT， 值 为 “Hello world.”。 

<?php 


define("CONSTANT", "Hello world."); 
?> 


< 人 注意 : 常量 和 变量 有 如 下 不 同 。 
常量 前 面 没有 美元 符号 ($) 。 
常量 只 能 用 defineO 函 数 定义 ， 而 不 能 通过 赋值 语句 。 
常量 可 以 不 用 理会 变量 的 作用 域 而 在 任何 地 方 定义 和 访问 。 
常量 一 旦 定义 就 不 能 被 重新 定义 或 者 取消 定义 。 
常量 的 值 只 能 是 标量 。 


2. 使 用 const 关键 字 | 
使 用 const 关键 字 定 义 常量 必须 位 于 最 项 端的 作用 区 域 ， 因 为 用 此 方法 是 在 编译 时 定义 的 。 不 能 | 
在 函数 内 、 循 环 内 或 者 站 语 句 之 内 用 const 来 定义 常量 。 | 
【示例 2】 下 面 示例 演示 使 用 const 关键 字 定义 一 个 普通 常量 , 常量 名 为 CONSTANT, 值 为 "Hello | 
World"。 | 


<?php 

/ 以 下 代码 在 PHP 5.3.0 后 可 以 正常 工作 
const CONSTANT = 'Hello World'; 

?> 


16.3.6 ”使 用 常量 


获取 常量 的 值 有 以 下 两 种 方法 。 

回 ”使 用 常量 名 直接 获取 值 。 

加 ”使 用 constant0 函 数 获取 。 

constant0 〇 函数 和 直接 使 用 常量 名 输出 的 效果 是 一 样 的 , 但 函数 可 以 获取 动态 的 常量 ， 人 要 
灵活 方便 很 多 。 

constantO 函 数 的 语法 格式 如 下 。 


mixed constant(string $name) 
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参数 name 为 要 获取 常量 的 名 称 ， 也 可 以 为 存储 常量 名 的 变量 。 如 果 获取 成 功 则 返回 常量 的 值 ， 

”否则 提示 错误 信息 。 

【示例 】 下 面 示例 使 用 define0 函 数 定义 一 个 常量 MAXSIZE， 然 后 使 用 两 种 方法 读 取 常 量 的 值 ， 
合 内 。 答 出 结果 是 相同 的 。 


<2php 


Note define("MAXSIZE", 100); 
| echo MAXSIZE; / 输出 100 
echo constant("MAXSIZE"): / 输出 100 
人 


| 16.3.7 ”预定 义 常量 


国 呈 : 2 
线 上 阅读 


| PHP 提供 了 大 量 的 预定 义 常量 。 不 过 很 多 常量 都 是 由 不 同 的 扩展 库 定 
” 义 的 ， 只 有 在 加 载 了 这 些 扩展 库 时 才 会 出 现 。 

| 有 些 预 定义 常量 的 值 会 随 着 它们 在 代码 中 的 位 置 改变 而 改变 。 例 如 ，_LINE_ 的 值 就 依赖 于 它 
| 在 脚本 中 所 处 的 行 来 决定 ， 因 此 也 被 称 为 魔术 常量 。 这 些 特殊 的 常量 不 区 分 大 小 写 。 

| 有 关 预 定义 常量 的 详细 说 明 ， 请 参考 《PHP 手册 》。 常 用 预定 义 常量 的 应 用 演示 可 扫 码 了 解 。 


16.4 PHP 运算 符 


| 运算 符 是 用 来 对 变量 、 常 量 和 数据 进行 计算 的 符号 ， 它 可 以 通过 一 个 或 多 个 值 ( 即 表达 式 ) 产生 

| 另 一 个 值 。 因 此 ， 任 何 能 够 返回 一 个 值 的 结构 都 是 运算 符 ， 而 那些 没有 返回 值 的 就 不 是 运算 符 ， 如 函 

| 数 可 以 视 为 一 个 运算 符 ， 而 echo 命令 就 不 是 一 个 运算 符 。 

| PHP 提供 了 以 下 3 种 类 型 的 运算 符 。 

加 ”一 元 运算 符 : 只 运算 一 个 值 ， 如 !( 取 反 运算 符 ) 或 ++〈 递 加 运算 符 ) 。 

回 ”二 元 运算 符 : PHP 支持 的 大 多 数 运算 符 都 是 这 种 。 

回 “三 元 运算 符 : ?:。 根据 一 个 表达 式 在 另 两 个 表达 式 中 进行 选择 计算 , 是 条 件 语 句 的 简化 应 月 
注意 ， 为 了 避免 误 用 ， 建 议 把 整个 三 元 表达 式 放 在 扩 号 里 。 


16.4.1 算术 运算 符 
算术 运算 符 用 来 处 理 四 则 运算 的 符号 ， 在 数学 计算 中 应 用 比较 多 。 常 用 算术 运算 符 如 表 16.8 所 示 。 


表 16.8 算术 运算 符 
算术 运算 符 说 了 明 
3 取 反 。 如 -$a， 表 示 变量 $a 的 负 值 
+ 加 法 。 如 $a + $b 
= 减法 。 如 $a - $b 
乘法 。 如 a* $b 


除法 。 如 $a/ Sb 
取 模 。 如 $a % Sb， 获 得 $a 除 以 $b 的 余数 


“310.s 


第 10 章 DPI 基础 一 Ci 
dc 


16.4.2 ”赋值 运算 符 


基本 的 赋值 运算 符 是 =， 它 实际 上 就 是 把 右边 表达 式 的 值 赋 给 左边 的 运算 数 。 

赋值 运算 表达 式 的 值 也 就 是 所 赋 的 值 。 例 如 ，$a = 3 的 值 是 3。 因 此 下 面 写法 也 是 正确 的 。 

<?php 

$a=($b=4)+5; 

ys 

在 上 面 示例 中 ， 变 量 $a 的 值 为 9， 而 变量 $b 的 值 就 成 了 4。 | 

在 基本 赋值 运算 符 之 外 ,还 有 适合 于 所 有 二 元 算术 、 数 组 集合 和 字符 串 运 算 符 的 组 合 运算 符 ， 如 ， 
表 16.9 所 示 。 | 


表 16.9 算术 运算 符 


组 合 运算 符 说 了 明 
= 先 连 接 后 赋值 。 如 $a .= Sb， 等 于 $a = $a . $b 
+= 先 加 后 赋值 。 如 Sa += $b， 等 于 $a = $a + $b 
= 先 减 后 赋值 。 如 $a -= Sb， 等 于 $a = $a - Sb 
+ 一 先 乘 后 赋值 。 如 Sa*= Sb， 等 于 $a = $a * Sb 
人 先 除 后 赋值 。 如 Sa /= Sb， 等 于 Sa = $a / $b 


16.4.3 字符 串 运算 符 


有 以 下 两 个 字符 串 运算 符 。 | 视频 讲解 
回 一 个 是 连接 运算 符 (.) ， 它 返回 其 左右 参数 连接 后 的 字符 串 。 | 
回 ”一 个 是 连接 赋值 运算 符 (.=) ， 它 将 右边 参数 附加 到 左边 的 参数 后 ， 例 如 : 


<?php 

$a = "Hello "; 

$b = $a . "World!"; // $b ="Hello World!" 
$a = "Hello "; 

$a = "World!"; // $a = "Hello World!" 
?> 


16.4.4 位 运算 符 


位 运算 符 允 许 对 整 型 数 中 指定 的 位 进行 求 值 和 操作 。 如 果 左 右 参数 都 是 字符 串 ， 则 位 运算 符 将 操 

作 字 符 的 ASCI 值 。 在 PHP 中 位 运算 符 说 明 如 表 16.10 所 示 。 
表 16.10 ”位 运算 符 | 
说 了 明 
按 位 与 (and)。 如 $a & Sb， 将 $a 和 sb 中 都 为 1 的 位 设 为 1 
按 位 或 (or)。 如 $a | Sb， 将 $a 或 者 gb 中 为 1 的 位 设 为 1 | 
按 位 异 或 (xor)。 如 Sa^ Sb， 将 $a 和 $b 中 不 同 的 位 设 为 1 
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Bb 


续 表 
| 位 运算 符 说 明 
~ 按 位 非 (nob)。 如 ~ $a， 将 $a 中 为 0 的 位 设 为 1， 反 之 亦 然 
a 左 移 。 如 $a << Sb， 将 $a 中 的 位 向 左 移动 Sb 次 〔 每 一 次 移动 都 表示 乘 以 2) 
>> 右 移 。 如 $a >> Sb， 将 $a 中 的 位 向 右 移动 $b 次 每 一 次 移动 都 表示 除 以 2) 


【示例 】 在 下 面 示例 中 使 用 位 运算 符 对 变量 中 的 值 进行 位 运算 操作 。 


<2php 

echo 12^ 9: 1/ 输出 为 “5? 

echo "12" ^ "9"; // 输出 退 格 字 符 (ascii 8) 
echo "hallo" ^ "hello"; 1/ 输出 ascii 值 #0 #4 #0 #0 #0 
echo 2 人 "3"; /1/ 输出 1 

echo "2" ^ 3; / 输出 1 

Dx 


16.4.5 ”比较 运算 符 


比较 运算 符 允 许 对 两 个 值 进行 比较 ， 返 回 结果 为 布尔 值 ， 如 果 比 较 结果 为 真 ， 则 返回 值 为 true， 
否则 返回 值 为 false。PHP 中 的 比较 运算 符 如 表 16.11 所 示 。 


表 16.11 比较 运算 符 
比较 运算 符 说 了 明 
一 等 于 。 如 $a == $b， 返 回 值 等 于 tmue， 则 说 明 $a 等 于 Sb 
= 一 全 等 。 如 $a = 一 Sb， 返 回 值 等 于 tmue， 则 说 明 $a 等 于 $b， 并 且 它 们 的 类 型 也 相同 
! 不 等 。 如 $a !=$b， 返 回 值 等 于 tmue， 则 说 明 $a 不 等 于 $b 
<> 不 等 。 如 $a <>Sb， 返 回 值 等 于 tmue， 则 说 明 $a 不 等 于 Sb 


!= 非 全 等 。 如 $a ! 一 Sb， 返 回 值 等 于 true， 则 说 明 $a 不 等 于 $b， 或 者 它们 的 类 型 不 同 
< 小 于 。 如 $a <$b， 返 回 值 等 于 true， 则 说 明 $a 严格 小 于 $b 
> 大 于 。 如 $a >$b， 返 回 值 等 于 tmue， 则 说 明 $a 严格 大 于 $b 
<= 小 于 等 于 。 如 $a <=$b， 返 回 值 等 于 tmue， 则 说 明 $a 小 于 或 者 等 于 Sb 
>= 大 于 等 于 。 如 $a >=$b， 返 回 值 等 于 tmue， 则 说 明 $a 大 于 或 者 等 于 Sb 
太空 船 运算 符 (组 合 比较 符 )。 如 $a <=> Sb， 当 $a 小 于 、 等 于 、 大 于 $b 时 分 别 返回 一 
这 个 小 于 、 等 于 、 大 于 0 的 integer 值 。PHP7 开始 支持 
本 NULL 合并 操作 符 。 如 $a ?? Sb ?? Sc， 从 左 往 右 第 一 个 存在 且 不 为 NULL 的 操作 数 。 


如 果 都 没有 定义 且 不 为 NULL， 则 返回 NULL。PHP7 开始 支持 


如 果 比 较 一 个 整数 和 字符 串 ， 则 字符 串 会 被 转换 为 整数 。 如 果 比 较 两 个 数字 字符 串 ， 则 作为 整数 
比较 。 此 规则 也 适用 于 switch 语句 ， 例 如 : 


<?php 
| var_dump(0 一 "a"); /0 一 0->tme 
| var_dump("1" — "01"): /1 一 1->tme 
| var_dump("1" =— "1e0"); /1 一 1->tme 
| > 


“3d2s 
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16.4.6 ”逻辑 运算 符 


逻辑 运算 符 用 来 组 合 逻辑 运算 的 结果 ,是 程序 设计 中 一 组 非常 重要 的 运算 符 。 PHP 的 逻辑 运算 符 EE 
如 表 16.12 所 示 。 | 


表 16.12 逻辑 运算 符 


逻辑 运算 符 说 了 明 
and 逻辑 与 。 如 果 $a 与 Sb， 都 为 tue， 则 $a and $b 返回 值 等 于 true 
&& 逻辑 与 。 如 果 $a 与 Sb， 都 为 tue， 则 $a && $b 返回 值 等 于 true 
or 逻辑 或 。 如 果 $a 或 Sb， 有 一 个 为 tue， 则 $a or $b 返回 值 等 于 true 
中 逻辑 或 。 如 果 $a 或 Sb， 有 一 个 为 tue， 则 $a || Sb 返回 值 等 于 true 
xor 逻辑 异 或 。 如 果 $a 或 Sb， 有 一 个 为 tue， 另 一 个 为 false， 则 $a xor $b 返回 值 等 于 tue 


! 逻辑 非 。 如 果 $a， 为 ttue， 则 !$a 返回 值 等 于 false 
【示例 】 下 面 示 例 中 foo0 函 数 不 会 被 调用 ， 因 为 它们 被 运算 符 “ 短 路 ”了 。 


<?php 

$a = (false && foo0); 
$b = (true || foo0); 

$c = (false and foo0); 
$d = (true or foo()); 
?> 


16.4.7 ”错误 控制 运算 符 


PHP 支持 错误 控制 运算 符 : @。 当 将 其 放置 在 一 个 PHP 表达 式 之 前 ， 该 表达 式 可 能 产生 的 任何 
异 误 信息 都 被 忽略 。 如 果 激 活 track_errors 特性 ， 表 达 式 所 产生 的 任何 错误 信息 都 被 存放 在 变量 
$php_errormsg 中 ， 例 如 : | 
<?php 
$a=1/0; 
?> 
运行 上 面 代码 , 则 会 产生 一 个 异常 , 并 在 浏览 器 中 呈现 出 来 。 如果 避免 错误 信息 显示 在 浏览 器 中 ， 
则 可 以 在 表达 式 前 面 添加 @ 运 算 符 ， 例 如 : 
<?php 
$a = @(1/0); 
2 | 
< 注意 ，@ 运 算 符 只 对 表达 式 有 效 。 简 单 地 说 ， 如 果 能 从 某 处 得 到 值 ， 就 能 在 它 前 面 加 上 @ 运 算 符 。 | 
例如 ， 可 以 把 它 放 在 变量 、 函 数 和 include() 调 用 、 常 量 等 之 前 。 不 能 把 它 放 在 函数 或 类 的 | 
定义 之 前 ， 也 不 能 用 于 条 件 结构 前 。 | 


16.4.8 ”运算 符 的 优先 级 和 结合 方向 
所 谓 运 算 符 的 优先 级 ， 是 指 在 表达 式 中 哪 一 个 运算 符 先 计算 ， 哪 一 个 呈 和 全 
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运算 符 后 计算 ， 如 数学 四 则 运算 中 的 “ 先 乘除 ， 后 加 减 ”， 就 说 明 乘 除 运算 符 的 优先 级 高 于 加 减 运 
| 算 符 。 


PHP 的 运算 符 在 运算 中 遵循 的 规则 是 : 优先 级 高 的 操作 先 执行 ， 优 先 级 低 的 操作 后 执行 ， 同 一 优 


， 先 级 的 操作 ， 按 照 从 左 到 右 的 顺序 执行 。 
< 注意 :小 括号 内 的 运算 优先 级 最 高 。 因 此 通过 小 括号 可 以 主动 改变 表达 式 中 运算 符 的 运算 优 


A 
同时 ， 运 算 符 的 结合 方向 决定 求 值 的 顺序 。PHP 运算 符 的 优先 级 和 结合 方向 说 明 请 扫 码 了 解 。 


16.5 PHP 表达 式 


所 谓 表达 式 ， 简 单 地 说 就 是 有 返回 值 的 式 子 ， 它 是 由 运算 符 和 运算 数组 成 ， 独 立 的 运算 数 也 能 够 


在 PHP 中 ， 几 乎 所 写 的 任何 代码 都 可 以 为 一 个 表达 式 。 最 简单 的 表达 式 是 常量 和 变量 。 当 输入 


$a=5， 即 将 值 5 分 配给 变量 $a。 很 明显 ，5 是 一 个 值 为 5 的 表达 式 。 稍 复杂 的 表达 式 是 函数 ， 例 如 : 


<?php 

function foo O{ 
return 5; 

Ys 


函数 也 是 表达 式 ， 表达 式 的 值 即 为 它们 的 返回 值 。 既 然 foo0 返 回 5， 表 达 式 foo0 的 值 也 是 5。 通 


常 函数 不 仅仅 返回 一 个 值 ， 还 会 进行 计算 ， 完 成 特定 任务 。 


在 一 个 表达 式 末 尾 加 上 一 个 分 号 , 这 时 它 就 成 为 一 个 语句 。 可 见 表 达 式 与 语句 之 间 的 关系 是 非常 


紧密 的 ， 也 能 够 相互 转换 。 例 如 ， 在 “$b=$a=5;” 一 句 中 ，$a=5 是 一 个 有 效 的 表达 式 ， 它 本 身 不 是 
| 一 条 语句 ， 而 加 上 分 号 之 后 ,，“$b=$a=5;” 就 是 一 条 有 效 的 语句 。 


16.6 PHP 语句 


PHP 程序 都 是 由 一 系列 语句 组 成 ,语句 就 是 要 执行 的 命令 。 一 条 语句 可 以 是 一 个 赋值 语句 , 一 个 


| 函数 调用 ， 一 个 循环 流程 ， 一 个 条 件 流程 ， 或 者 是 一 个 什么 也 不 做 的 空 语句 。 


语句 以 分 号 标记 结束 ， 可 以 使 用 大 括号 将 一 组 语句 封装 成 一 个 语句 块 。 本 节 将 重点 介绍 PHP 各 


种 流程 控制 语句 ， 主 要 包括 条 件 语句 和 循环 语句 。 


16.6.1 j 语 名 
站 语句 允许 根据 特定 的 条 件 执 行 指定 的 代码 块 。 结 构 与 C 语言 相似 ， 其 语法 格式 如 下 。 


if (expr) 
statement 


如 果 表 达 式 expr 的 值 为 真 ， 则 执行 语句 statement; 否则 ， 将 忽略 语句 statement。 流 程控 制图 如 


| 图 16.3 所 示 。 
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图 16.3 站 语句 流程 控制 示意 图 
【示例 1】 在 下 面 示例 中 ， 如 果 $a 大 于 $b， 则 将 显示 提示 信息 : a 大 于 b， 否 则 将 不 显示 。 
<?php 
$a = 15; 
$b= 13; 
if($a > $b) 
echo "a 大 于 b"; 
> 


如 果 根 据 条件 执 行 的 语句 不 止 一 条 ， 可 以 使 用 多 辑 分 隔 符 f} 包 于 这 些 语句 ， 形 成 一 组 语句 块 。 | 
【示例 2】 下 面 示例 使 用 PHP 内 置 函数 rand0 随 机 生成 一 个 数 , 然后 判断 该 数 是 否 能 否 被 2 整除 ， | 
如 果 整 除 ， 则 显示 该 数 ， 并 提示 它 是 偶数 。 | 


<?php 

$num = rand(); / 使 用 rand0 函 数 生成 一 个 随机 数 

让 (Snum%2 一 0){ // 判断 变量 $num 是 否 为 偶数 
echo \$num = $num"; // 如 果 为 偶数 ， 输 出 表达 式 和 说 明文 字 
echo "<br>$num 是 偶数 。"; 

} 

让 

迪 提示 : rand0 函 数 可 以 产生 一 个 随机 整数 ， 用 法 如 下 。 


int rand( void ) 
int rand( int $min , int Smax ) 


TandO 函 数 允 许 不 传递 参数 ， 此 时 将 随机 生成 一 个 从 0 到 最 大 整数 的 数字 ; 如 果 给 定 两 个 整 
数 ， 则 将 限定 随机 数 的 范围 。 例 如 ，rand(3.5) 将 随机 生成 从 3 到 5 的 随机 数 ， 即 3、4、5 中 
任意 一 个 。 


< 人 注意 : 让 语句 可 以 谈 套 使 用 ， 这 样 可 以 设计 复杂 的 条 件 结构 ， 此 话题 将 在 下 面 小 节 介 绍 。 


16.6.2 else 语句 
else 语句 仅 在 让 或 elseif 语句 中 的 表达 式 的 值 为 假 时 执行 ， 其 语法 格式 如 下 。 


if (expr) 
statementl 
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statement2 


如 果 表 达 式 expr 的 值 为 真 ， 则 执行 语句 statement1; 否则 ， 将 执行 语句 statement2 。 流 程控 制 如 
钴 站 图 16.4 所 示 。 


图 16.4 让 和 else 语句 组 合流 程控 制 示意 图 
【示例 】 下 面 示例 使 用 rand(1,10) 随 机 生成 一 个 1 一 10 的 随机 数 ， 然 后 判断 是 否 为 偶数 ， 并 输出 


| 提示 信息 。 
| <?php 
$num = rand(1,10); / 使 用 rand0 函 数 生成 一 个 1 一 10 的 随机 数 
让 (num%2 一 0){ / 判断 变量 $num 是 否 为 偶数 
echo "变量 Snum 是 偶数 。"; / 如 果 为 偶数 ， 输 出 “变量 gnum 是 偶数 ” 
}else { 
echo "变量 $num 是 奇数 。"; // 如 果 为 奇数 ， 输 出 “变量 Snum 是 奇数 ” 
} 
2 


16.6.3 elseif 语句 


| 让 和 else 语句 组 合 可 以 设计 两 个 分 支 的 条 件 结构 ， 但 是 如 果 要 设计 多 分 支 的 条 件 结构 ， 就 需要 
| elseif 语句 来 配合 设计 。 例 如 ， 用 户 登 录 时 的 身份 判断 : 管理 员 、VIP 会 员 、 会 员 、 游 客 等 。 
elseif 是 让 和 else 的 组 合 ， 也 可 以 写 为 else if， 其 语法 格式 如 下 。 

if (expr1) 

| statement1 


elseif (expr2) 
statement2 


elseif (exprn) 
statementn 
else 
statementn+1 


如 果 表 达 式 exprl 的 值 为 真 ， 则 执行 语句 statement1; 否则 ， 再 判断 表达 式 expr2 的 值 是 否 为 真 ， 
| 如 果 为 真 ， 则 执行 语句 statement2; 依 此 类 推 ， 流 程控 制图 如 图 16.5 所 示 。 
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图 16.5 elseif 语句 流程 控制 示意 图 


【示例 】 编 写 一 个 程序 ， 对 年 龄 进行 判断 ， 如 果 年 龄 大 于 18 岁 ， 则 输出 “你 是 成 年 人 ” 如 果 大 
于 8 岁 ， 小 于 18 岁 ， 输 出 “你 的 年 龄 适合 读书 ”， 如 果 小 于 8 岁 ， 输 出 “你 应 该 上 幼儿 园 ”。 


<?php 
$age = 5; 1 年龄 
if (Sage > 18) { 
echo ' 你 是 成 年 人 ! ' 
} elseif (Sage > 8 && $age < 18) { 
echo ' 你 的 年 龄 适合 读书 '; 
} elseif (Sage < 8) { 
echo "你 应 该 上 幼儿 园 '; 
} 
?> 


< 人 注意 : elseif 与 else if 只 有 在 使 用 大 括号 的 情况 下 才 认 为 是 完全 相同 。 如 果 用 冒号 来 定义 elseif 
条 件 ， 那 就 不 能 用 else 这， 否则 PHP 会 产生 解析 错误 ， 例 如 : 


/ 正确 写法 
if($a> $b) { 
echo "a 大 于 b"; 
} else if ($a =— $b) { 
echo "a 等 于 b"; 
} else { 
echo "a 小 于 b"; 


/ 错误 写法 
if ($a > $b): 
echo "a 大 于 b"; 
else if ($a 一 $b) : 
echo "a 等 于 b"; 
else: 
echo "a 小 于 b"; 
endif 


因此 ， 为 了 避免 玻 忽 所 导致 的 语法 错误 ， 一 般 建议 都 使 用 大 括号 包 衷 语句 块 。 
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16.6.4 switch 语句 


频 | switch 语句 也 可 以 设计 多 分 支 条 件 结构 。 与 elseif 语句 相 比 ，switch 结构 更 简洁 ， 执 行 效率 更 高 。 
优 F | ”switch 语句 适用 语 境 : 当 需 要 把 同一 个 变量 或 表达 式 ) 与 多 个 值 进行 比较 ， 并 根据 比较 结果 ， 决 定 
， 执行 不 同 的 语句 块 ， 其 语法 格式 如 下 。 
Note . 
| Switch (expn){ 
| case valuel: 
| statement] 
break; 
case Value2: 
statement2 
break; 


case valuen: 
statementn 
break; 
default: 
default statementn 
} 
| switch 语句 根据 变量 或 表达 式 expr 的 值 ， 依 次 与 case 中 的 常量 表达 式 的 值 相 比 较 ， 如 果 相 等 ， 
| 则 执行 其 后 的 语句 块 ， 只 有 遇 到 break 语句 ， 或 者 switch 语句 结束 才 终 止 ， 如 果 不 相等 ， 继 续 查 找 下 
| 一 个 case。switch 语句 包含 一 个 可 选 的 default 语句 ， 如 果 在 前 面 的 case 中 没有 找到 相等 的 条 件 ， 则 
| 执行 default 语句 ， 它 与 else 语句 类 似 。switch 语句 流程 控制 图 如 图 16.6 所 示 。 


图 16.6 ”switch 语句 流程 控制 示意 图 


【示例 1】 下 面 示例 比较 变量 $i 的 值 ， 是 否 等 于 0、1、2， 然 后 根据 比较 结果 ， 分 别 输出 显示 不 
， 同 的 提示 信息 。 

| <?php 

| $1=0; 

| switch (Si { 
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上 面 代码 输出 显示 : 二 0。 
【示例 2】 如 果 在 case 语句 中 没有 break 语句 ，PHP 将 继续 执行 下 一 个 case 语句 ， 而 忽略 下 一 
个 case 的 比较 值 。 


上 面 代码 输出 显示 : i=0i=1i=2。 
只 有 当 $i 等 于 2 时 ， 才 会 得 到 预期 的 结果 ， 仅 输出 显示 : =2。 所 以 ， 在 使 用 switch 语句 时 ， 建 
议 在 每 个 case 子 句 末尾 都 加 上 break 语句 。 
【示例 3】case 语句 可 以 为 空 ， 这 样 只 不 过 将 控制 转移 到 了 下 一 个 case 语句 。 


上 面 代码 输出 显示 : i<3。 
【示例 4】default 语句 比较 特殊 ， 它 匹配 所 有 case 都 不 匹配 的 情况 。 
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Switch ($1) { 
| case 0: 
| echo "i= 0": 
| break; 
食 乒 | | case 1: 
| echo "i=1"; 
‘Note break: 
| case 2: 
echo "i=2"; 
break; 
default: 
echo "i 不 是 0、1、2"; 
} 


> 
| 上 面 代码 输出 显示 : i 不 是 0、1、2。 
”4 轴 注意 :case 表达 式 可 以 是 任何 简单 类 型 的 求 值 表达 式 ， 即 表达 式 的 值 为 整 型 、 肖 点数、 字符 囊 ， 


不 能 是 数组 或 对 象 。 
【示例 $】PHP 允许 使 用 分 号 〈:) 代替 case 语句 后 的 冒号 〈:)。 
<?php 
$i =5; 
switch ($i { 
case 0; 
echo "i= 0"; 
break; 
case 1; 
echo "i=1"; 
break; 
case 2; 
echo "i=2"; 
break; 
default; 
echo "i 不 是 0、1、2"; 
n> 


16.6.5 ”while 语句 


while 语句 是 PHP 中 最 简单 的 循环 结构 ， 其 基本 格式 如 下 。 
while (expr) 
statement 
| 当 表 达 式 expr 的 值 为 真 时 ， 将 执行 statement 语句 ,执行 结束 后 ， 再 返回 到 expr 表达 式 继续 进行 
”判断 。 直 到 表达 式 的 值 为 假 ， 才 跳出 循环 ， 执 行 下 面 的 语句 。 
| while 循环 语句 的 流程 控制 如 图 16.7 所 示 。 
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图 16.7 while 语句 流程 控制 示意 图 


【示例 】 下 面 示例 使 用 while 语句 定义 一 个 循环 结构 ， 设 计 输 出 显示 数字 1 一 10。 | 
<?php 
$i= 1; | 
while ($i <= 10) { 

echo $1++; 


} 


?> 


16.6.6 ”do-while 语句 


do-while 与 while 循环 非常 相似 ， 区 别 在 于 表达 式 的 值 是 在 每 次 循环 结束 时 检查 ， 而 不 是 在 开始 
时 检查 。 因 此 do-while 循环 能 够 保证 至 少 执行 一 次 循环 ， 而 while 循环 就 不 一 定 ， 如 果 表 达 式 的 值 为 
假 ， 则 直接 终止 循环 ， 不 进入 循环 。 

do-while 循环 语句 的 流程 控制 如 图 16.8 所 示 。 


图 16.8 do-while 语句 流程 控制 示意 图 | 


【示例 】 下 面 示例 比较 while 和 do-while 语句 的 不 同 。 可 以 看 到 ， 不 管 变量 pum 是 否 为 1，do-whbile 
语句 都 会 执行 一 次 输出 ， 而 在 while 语句 中 ， 是 看 不 到 输出 显示 的 。 


<2?php | 
Snum= 1; | 
while(Snum != D){ | 
echo "不 会 看 到 "; | 
} 
do{ 
echo "会 看 到 "; 
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}whbile(Snum != 1); 
?> 


a | 16.6.7 for 语句 


| for 语句 是 一 种 更 简洁 的 循环 结构 ， 其 语法 格式 如 下 。 
for (exprl; expr2; expr3) 
statement 
表达 式 exprl 在 循环 开始 前 无 条 件 地 求 值 一 次 ， 而 表达 式 expr2 在 每 次 循环 开始 前 求 值 。 如 果 表 
| 达 式 expr2 的 值 为 真 ， 则 执行 循环 语句 ， 否 则 将 终止 循环 ， 执 行 下 面 代 码 。 表 达 式 expr3 在 每 次 循环 
| 之 后 被 求 值 。 
< 注意 : for 语句 中 3 个 表达 式 都 可 以 为 空 , 或 者 包括 以 运 号 分 隔 的 多 个 子 表达 式 . 在 表达 式 expr2 
| 中 ， 所 有 用 运 号 分 隔 的 子 表达 式 都 会 计算 , 但 只 取 最 后 一 个 子 表达 式 的 值 进行 检测 。expr2 
为 空 , PHP 会 认为 其 值 为 真 , 意味 着 将 无 限 循 环 下 去 . 除了 使 用 expr2 表达 式 结束 循环 外 ， 
也 可 以 在 循环 语句 中 使 用 break 语句 结束 循环 。 


for 循环 语句 的 流程 控制 如 图 16.9 所 示 。 


图 16.9 for 语句 流程 控制 示意 图 


| 【示例 】 下 面 示例 设计 了 4 个 循环 结构 ， 演 示 了 for 结构 的 灵活 用 法 ， 它 们 都 可 以 输出 显示 1 一 
| 10 的 数字 。 
| <?php 
for ($i=1; $i<=10; Sit+){ * 循环 1*/ 
echo $i; 
> 
for ($i=1;; SitH){ /* 循环 2*/ 
if($i>10){ / 使 用 条 件 语 句 控制 循环 ， 当 变量 i 等 于 10 时 ， 跳 出 循环 
break; 
} 


echo $i; 
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$i=1; 
for (;;) { 上 # 循环 3 */ 
这 (Si>10){ / 使 用 条 件 语 句 控制 循环 ， 当 变量 i 等 于 10 时 ， 跳 出 循环 | 
break; | 
} | 
echo $i; | 屋内 
Sitt; // 递增 循环 变量 ‘Note 
} | 
人 # 循环 4*/ 
for ($i= 1, $j = 0; $i <= 10; $j += $i, print $1, $i++); 
和 


在 上 面 示例 中 ， 第 一 种 循环 结构 比较 常用 ， 后 面 3 种 循环 形式 在 特殊 情况 下 比较 实用 ， 建 议 灵 活 
掌握 它们 ， 学 会 在 for 循环 中 灵活 设计 表达 式 ， 有 时 候 会 很 实用 。 | 


16.6.8 foreach 语句 
| 回 
foreach 循环 是 在 PHP4 中 开始 引入 , 它 是 for 循环 的 一 种 特殊 结构 形式 , 主要 应 用 于 数组 或 对 象 。 | 视频 讲解 
foreach 语句 的 语法 格式 如 下 。 | 


foreach (array_expression as $value) 
statement 


或 者 


foreach (array_expression as $key => $value) 
statement 


foreach 语句 将 遍历 数组 aray_expression， 每 次 循环 中 ， 当 前 单元 的 值 被 赋值 给 变量 $value， 并且 | 
数组 的 指针 会 移 到 下 一 个 单元 , 下 一 次 循环 将 会 得 到 下 一 个 单元 , 依 此 类 推 , 直到 最 后 一 个 单元 结束 。 | 
在 第 二 种 语法 格式 中 ， 不 仅 获取 每 个 单元 的 值 ， 还 可 以 获取 每 个 单元 的 键 名 ， 键 名 被 赋 给 变量 $key。 | 

从 PHP5 开始 ， 可 以 在 $value 之 前 加 上 & 运 算 符 ， 允 许 以 引用 赋值 ， 而 不 是 复制 赋值 ， 这 样 可 以 | 
实现 对 原 数 组 的 修改 。 | 

【示例 】 下 面 示例 使 用 foreach 语句 遍历 数组 $arr， 使 用 &$value 引用 每 个 元 素 的 值 ， 然 后 在 循环 ， 
体内 修改 数组 的 值 。 | 

<?php 

Sarr = array(1, 2, 3, 4); 

foreach ($arr as &Svalue) { 

Svalue = $value * 2; 


} 
var_dump($arr); 
?> 


执行 上 面 代 码 ， 数 组 $arr 的 值 变 成 array(2, 4, 6, 8)。 
则 输出 显示 为 : array(4) { [0]=> int(2) [1]=> int(4) [2]=> int(6) [3]=> &int(8) } 。 


16.6.9 ”break 语句 


break 语句 能 够 结束 当前 for、foreach、while、do-while 或 者 switch 语句 的 执行 。 同 时 break 可 以 视频 讲解 


人 
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/Ws 
2 
接受 一 个 可 选 的 数字 参数 米 决定 跳出 几 重 循环 ， 其 语法 格式 如 下 。 


| break $num:; 
”应 用 break 语句 的 一 般 流程 控制 如 图 16.10 所 示 。 


全 和 


图 16.10 ”break 语句 的 应 用 流程 控制 示意 图 


| 【示例 】 下 面 示例 设计 在 while 循环 中 顽 套 一 个 多 重 分 支 结构 switch。 当 变量 i 的 值 为 5 时 ， 将 
| 跳出 switch， 进 入 下 一 个 循环 ， 如 果 变量 i 的 值 为 10 时 ， 则 直接 跳出 循环 。 


<?php 
$i=0; 
while (H+Si { 
Switch ($i) { 
case 5: 
echo " 5<br />\n"; 
break 1; /# 只 退出 switch */ 
case 10: 
echo " 10 <br />\n"; 
break 2; 诊 退出 switch 和 while 循环 */ 
default: 
break; 
b 
?> 


“16.6.10 ”continue 语句 


可 频 讲 如 ”continue 语句 用 在 循环 结构 体内 ,主要 用 于 跳 过 本 次 循环 中 剩余 的 代码 ,并 在 表达 式 的 值 为 真 时 ， 
”继续 执行 下 一 次 循环 。 它 可 以 接受 一 个 可 选 的 数字 参数 来 决定 跳出 几 重 嵌 套 循环 结构 ， 其 语法 格式 

| 如 下 。 

continue $num; 

应 用 continue 语句 的 一 般 流 程控 制 如 图 16.11 所 示 。 
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continue 


图 16.11 ”continue 语句 的 应 用 流程 控制 示意 图 


【示例 】 下 面 示例 使 用 while 语句 设计 了 3 层 嵌 套 的 循环 结构 。 在 内 层 循环 结构 中 ， 设 计 当 输 出 
显示 提示 信息 之 后 ， 直 接 跳 到 最 外 层 循环 。 这 样 就 相当 于 第 2 层 和 第 1 层 循环 结构 每 次 仅 执行 一 次 ， | 
直到 第 3 层 循环 结构 结束 。 


<2?php 
$i=0; 
while ($it++ < 5) { 
echo "3 层 循环 <br />\n"; 
while (1) { 
echo "&nbsp;&nbsp;2 层 循环 <br />\n"; 
while (1) { 
echo "&nbsp;&nbsp;1 层 循环 <br />\n"; 
continue 3; 


} 
echo "不 输出 该 句 <br />\n"; 


}: 
echo "不 执行 该 句 <br />\n"; 
六 


?> 


16.6.11 goto 语句 


goto 语句 可 以 用 来 跳 转 到 程序 中 的 某 一 指定 位 置 。 该 目标 位 置 可 以 用 目标 名 称 加 上 冒号 来 标记 ， 
例如 : 

<?php 

goto a; 

echo 1; 

aiecho 2; | 

0 | 


在 上 面 示例 中 ， 将 输出 显示 2， 而 不 忽略 输出 显示 1。 
An 注意 : 在 PHP 中 ，goto 语句 的 使 用 有 一 定 限制 ， 只 能 在 同一 个 文件 和 作用 域 中 卡 转 ， 也 就 是 说 | 
无 法 跳出 一 个 画 数 或 类 方法 ， 也 无 法 跳 入 另 一 个 函数 。 同 时 也 无 法 跳 入 任何 循环 或 者 
switch 结构 中 。 常 见 的 用 法 是 用 来 跳出 循环 或 者 switch， 可 以 代替 多 层 的 break。 | 
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括号 运算 符 包含 正确 的 参数 即 可 。 
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16.7 PHP 函数 


函数 , 就 是 将 一 些 重复 用 到 的 功能 写 在 一 个 独立 的 代码 块 中 , 在 需要 时 单独 调用 。 在 开发 过 程 中 ， 


经 常 需要 重复 某 些 操作 ， 如 数据 查询 、 字 符 串 处 理 等 ， 如 果 每 次 都 重复 输入 相同 的 代码 ， 不 仅 执行 效 
| 率 低 ， 而 且 后 期 维护 也 很 麻烦 ， 使 用 函数 就 可 以 解决 这 些 问题 。 


”性 提示 : PHP 函数 可 以 分 为 两 类 : 一 类 是 内 置 函数 ，PHP 自 带 的 预定 义 二 数 ， 用 户 只 需要 根据 本 


数 名 调用 即 可 。PHP 备 受 欢迎 的 一 个 原因 就 是 拥有 大 量 的 内 置 函数 ; 另 一 类 就 是 自 定 义 函 
数 ， 就 是 由 用 户 自 己 定义 的 、 用 来 实现 特定 功能 的 函数 。 内置 函 数 可 以 通过 查询 《PHP 手 
册 》 来 学 习 ， 下 面 讲解 自 定义 函数 。 


16.7.1 定义 和 调用 函数 


在 PHP 语言 中 ， 定 义 函数 的 语法 格式 如 下 。 

function fun name($arg 1, $arg 2,..., Sarg n){ 
fun_body; 

} 

具体 说 明 如 下 。 

加 ”function: 表示 声明 自 定义 函数 时 必须 使 用 的 关键 字 。 

fun_name: 表示 函数 的 名 称 。 与 PHP 其 他 标识 符 命名 规则 相同 。 

$arg_1, $arg 2, .…, $arg n: 表示 函数 的 参数 ， 参 数 之 间 通 过 逗号 分 隔 ， 参 数 个 数 不 限 ， 也 可 
以 省 略 参 数 。 

回 fon_ body: 表示 函数 体 ， 可 以 包含 任意 多 行 代 码 ， 这 些 代码 是 函数 的 功能 主体 ， 并 由 这 些 代 
码 执行 和 完成 指定 的 任务 。 

当 定 义 好 函数 之 后 ， 即 可 调用 函数 ， 调 用 函数 的 方法 比较 简单 ， 只 需要 引用 函数 名 ， 其 后 使 用 小 


【示例 1】 下 面 示例 定义 了 一 个 square0 函 数 ， 计 算 传 入 的 参数 的 平方 ， 然 后 输出 结果 。 


<?php 
function square($num){ 人 # 声明 函数 */ 

retum "$num * $num = "Snum * Snum: /* 返回 计算 的 结果 */ 
8 
echo square (10): 让 调用 函数 ， 并 传递 参数 值 为 10 */ 
/ 输出: 10 * 10= 100 
?> 

【示例 2】〗】 下 面 示例 演示 如 何 定义 嵌 套 的 函数 ， 然 后 分 别 进 行 调用 。 

<?php 
function foo0{ 

function barO { 

echo "直到 foo0 被 调用 后 ， 我 才 可 用 。\n"; 

} 

} 
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上 # 现在 还 不 能 调用 bar0 函 数 ， 因 为 它 还 不 存在 */ 


foo0; 
放 现在 可 以 调用 bar0 函 数 了 ， 因 为 foo0 函 数 的 执行 使 得 bar0 函 数 变 为 已 定义 的 函数 */ | 
bar(); | y 
时 会 纵 
【示例 3】 下 面 示例 演示 如 何在 函数 体内 调用 函数 自身 ， 以 便 设计 递归 函数 。 | NT 
<?php | 
function recursion($a){ | 
这 (Sa<20){ / 设置 递归 终止 条 件 

echo "$a\n"; 

recursion($a + 1); / 调用 函数 自身 
recursion(1); / 启动 递归 函数 
1/ 输出 : 
?> 


在 调用 递归 函数 时 ， 应 该 设置 循环 调用 的 条 件 或 次 数 ， 避 免 死 循 环 调用 自身 ， 耗 尽 系统 资源 。 
16.7.2 ”函数 的 参数 
通过 参数 列表 可 以 传递 信息 给 函数 ， 这 个 信息 列表 是 以 去 号 作为 分 隔 符 的 表达 趟 列表 。 在 调用 画 机 频 计 
数 时 ， 需 要 向 函数 传递 参数 。 | 
次 提示 : 被 传 入 的 参数 被 称 为 实 参 ， 在 定义 函数 时 指定 的 参数 ， 被 称 为 形 参 ， 
参数 传递 的 方式 有 3 种 ， 简 单 说 明 如 下 。 
1. 按 值 传递 参数 
将 实 参 的 值 赋值 到 对 应 的 形 参 中 , 在 函数 内 部 的 操作 针对 形 参 进行 , 操作 的 结果 不 会 影响 到 实 参 ，| 
即 函数 返回 后 ， 实 参 的 值 不 会 改变 。 
【示例 1】 在 下 面 示例 中 ， 先 定义 一 个 fun0 函 数 ， 功 能 是 将 传 入 的 参数 值 做 运算 ， 然 后 再 输出 。 | 
接着 在 函数 外 部 定义 一 个 变量 $m， 即 实 参 ， 最 后 调用 fun($m) 函 数 。 分 别 在 函数 体内 和 体外 输出 形 参 | 
$m 和 实 参 $m 的 值 。 | 


<2php 
function fun(Sm){ 
Sm= Sm*2+1; / 改变 形 参 的 值 
echo "在 函数 内 : \Sm = ".$m: // 显示 形 参 值 为 11 
} 
Sm= 5; // 定义 实 参 并 赋值 
fun(Sm); / 调用 函数 
echo "在 函数 外 : \$m = ".$m: / 显示 实 参 值 为 5 
?> 


2， 按 引用 传递 参数 

按 引 用 传递 参数 就 是 将 实 参 的 内 存 地 址 传递 给 形 参 。 引 用 传递 的 方式 :定义 函数 时 ， 在 形 参 前 面 ， 
添加 & 符 号 即 可 。 
这 时 在 函数 内 ， 对 形 参 的 所 有 操作 ， 都 会 影响 到 实 参 的 值 ， 如 果 改 变形 参 ， 调 用 函数 后 ， 也 会 发 | 
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现实 参 的 值 发 生变 化 。 
【示例 2 下 面 示例 仍然 使 用 上 例 代 码 ， 唯 一 的 不 同 就 是 在 形 参 前 添加 了 一 个 & 符 号 。 按 引用 传 
， 递 参数 ， 则 演示 结果 会 发 现实 参 变 量 的 值 在 函数 调用 后 发 生 了 变化 ， 显 示 为 11。 


做 fF] | ”<pip 
ol function fun(&$m){ 
Sm= $m*2+1; // 改变 形 参 的 值 
| echo "在 函数 内 : \Sm = ".$m; / 显示 形 参 值 为 11 
| } 
| Sm=5; / 定义 实 参 并 赋值 
fun($m); // 调用 函数 

| echo "在 函数 外 : \$m = ".$m; / 显示 实 参 值 为 11 
| ?> 


3， 默认 参数 〈 可 选 参数 ) 

可 以 指定 某 个 参数 为 可 选 参数 ， 就 是 将 参数 放置 在 参数 列表 的 末尾 ， 并 且 为 其 指定 默认 值 。 

| 【示例 3】 下 面 示例 使 用 可 选 参 数 设计 一 个 简单 的 多 态 函 数 。 在 调用 函数 时 ， 如 果 仅 传递 一 个 参 
| 数值 ， 则 仅 显 示 该 参数 值 ， 如 果 传递 两 个 参数 值 ， 则 显示 两 个 参数 值 之 和 。 


<?php 
function fun(&Sm, $n=0){ // $m 为 引用 参数 ，S$n 为 可 选 参数 
$1= $m+ Sn; / 内 部 求 两 个 参数 和 
if($n = 0) // 如 果 第 二 个 参数 为 0， 则 仅 输出 第 一 个 参数 值 


echo \$m=".$1."<p>"; 
else 。”// 如 果 第 二 个 参数 为 非 0， 或 者 没有 传递 参数 ， 则 输出 两 个 参数 值 的 和 
echo \$m+\$n=".$1."<p>"; 
} 


Sm= 5; 

Sn=5; 

fun($m); // 显示 : Sm=5 
fun($m, $n); // 显示 : Sm+S$n= 10 
?> 


人 注意, 当 使 用 默认 参数 时 ， 任 何 默 认 参 数 汉 须 放 在 任何 非 里 认 参 数 的 右 侧 ; 否则 ， 画 数 将 会 出 错 。 
| PHP 还 允许 使 用 数组 和 特殊 类 型 NULL 作为 默认 参数 ， 但 是 默认 值 必 须 是 常量 表达 式 
不 能 是 诸如 变量 、 类 成 员 ， 或 者 函数 调用 等 表达 式 。 


16.7.3 函数 的 返回 值 


| 使 用 return 语句 可 以 定义 函数 的 返回 值 。 
| 如 果 在 函数 体内 调用 return 语句 , 将 会 立即 结束 其 后 所 有 函数 代码 的 执行 , 返回 retum 的 参数 值 ， 
| 并 将 程序 控制 权 交 给 调用 对 象 的 作用 域 。 

| 【示例 1】 在 下 面 示例 中 ， 先 定义 values0 函 数 ， 作 用 是 输入 物品 的 单价 、 税 率 ， 然 后 计算 实际 
| 交易 金额 ， 最 后 使 用 retum 语句 返回 计算 的 值 。 


< 

| function values($price,Stax=0.45){ // 定义 一 个 函数 ， 函 数 中 的 一 个 参数 有 默认 值 
| Sprice=$pricet+($price*$tax); / 计算 实际 金额 

| return S$price; / 返回 金额 
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echo values(100); / 调用 函数 | 

> 

函数 的 返回 值 可 以 是 数组 、 对 象 等 任意 类 型 的 值 。 但 是 函数 不 能 返回 多 个 值 , 如 果 要 返回 多 个 值 ， 会 
可 以 通过 返回 一 个 数组 来 得 到 类 似 的 效果 。 | 一 一 

【示例 2】 在 下 面 示例 中 ， 设 计 让 small0 函 数 返回 3 个 值 。 Note 
<2php | 
function smallO{ | 
Tetum array (0, 1, 2); / 以 数组 的 形式 返回 3 个 值 | 

} | 

list ($zero, $one, $two) = small(); / 把 返回 的 多 个 值 存储 到 3 个 变量 中 | 

echo "\$zero=". $zero; 1/ 输出 : $zero=0 | 

echo "<br>\$one=". $one; / 输出 : $one=1 | 

echo "<br>\$two=". $two:; /1/ 输出 : Stwo=2 

?> 


如 果 定 义 函数 的 返回 值 为 一 个 引用 , 则 必须 在 函数 声明 和 指派 返回 值 给 一 个 变量 时 都 使 用 引用 运 
算 符 &。 

【示例 3】 在 下 面 示例 中 ， 尽 管 声明 函数 方式 是 function &test0， 但 我 们 通过 $a = test0 的 函数 调 
用 方式 ， 得 到 的 其 实 不 是 函数 的 引用 返回 ， 只 是 将 函数 的 值 赋 给 $a 而 已 ， 而 $a 做 任何 改变 都 不 会 影 
响 到 函数 中 的 $b。 

而 通过 $a = &test0 方 式 调用 函数 , 它 的 作用 是 将 return $b 中 的 $b 变量 的 内 存 地 址 赋值 给 $a 变量 ， 
也 就 是 它们 的 内 存 地 址 指向 了 同一 个 地 方 ， 即 相当 于 $a=&$b 的 效果 ， 所 以 改变 $a 的 值 也 同时 改变 了 
$b 的 值 。 


<?php 
function &testO{ 
static $b = 0; / 声明 一 个 静态 变量 
$b= $b+1; / 递增 Sb 的 值 
echo $b; / 输出 变量 $b 的 值 
return $b: / 返回 变量 $b 的 值 
) 
$a = test(); /Sb 的 值 为 1 
和 = 和 
$a = test(); /Sb 的 值 为 2 
$a = &test(); /Sb 的 值 为 3 
$a=5; | 
$a = test(); /Sb 的 值 为 6 | 
?> | 


16.8 在 线 练 


人 


扎实 的 语言 基本 功 是 后 期 PHP 开发 的 前 提 ， 为 了 帮助 同学 们 快速 提升 PHP 编程 
能 力 ， 本 节 特 意 在 线 提供 了 大 量 小 程序 训练 题 ， 感 兴趣 的 同学 请 扫 码 练习 。 
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字符 串 操作 


在 Web 开发 中 ， 经 常 需要 操作 字符 串 ， 例 如 ， 替 换 字符 串 、 验 证 字符 串 、 提 取 字 符 串 
等 。 正确 操 作 字 符 串 ， 对 于 PHP 程序 员 来 说 非常 重要 。 本 章 将 围绕 字符 串 操 作 ， 讲 解 PHP 
处 理 字符 串 的 一 般 方法 和 技巧 


【 学 习 重 点 】 

MI 了 解 字符 囊 构成 

WI 正确 定义 字符 串 

WI 能 够 灵活 处 理 字符 串 


第 17 章 字符 率 据 作 | 


17.1 认识 字符 串 


字符 串 是 有 限 字符 的 序列 ， 主 要 包括 字母 、 数 字 、 特 殊 字符 (如 空格 符 等 )， 具 体 说 明 如 下 。 
回 数字 ,如 1、2、3 等 。 
回 “字母 ， 如 a、b、c 等 。 
回 “ 特 殊 字符 ， 如 #、@、%、& 等 。 
回 “ 不 可 见 字符 ， 如 换行 符 、 回 车 符 、Tab 字符 等 。 
不 可 见 字符 是 比较 特殊 的 一 组 字符 ， 它 用 来 控制 字符 品格 式 化 显示 ， 在 浏览 器 上 不 可 见 ， 只 能 看 | 

到 字符 串 输出 的 结果 。 
在 程序 设计 中 ， 字 符 串 是 经 常 使 用 的 一 种 类 型 。 字 符 串 操作 常用 在 表单 处 理 、HTML 文本 解析 、 | 

异步 响应 文本 解析 等 中 , 与 正则 表达 式 配合 使 用 以 提升 字符 串 操作 的 灵活 性 。 字 符 串 操作 包括 字符 | 

匹配 、 查 找 、 蔡 换 、 截 取 、 编 码 /解码 、 连 接 等 。 


17.2 定义 字符 串 


定义 字符 串 有 4 种 方法 : 单 引号 、 双 引号 、heredoc 语法 结构 、nowdoc 语法 结构 (PHP 5.3.0 开始 
支持 )， 具 体 介 绍 如 下 。 | 


17.2.1 单 引号 


定义 字符 串 的 最 简单 的 方法 是 用 单 引 号 把 字符 串 给 包围 起 来 。 

【示例 】 下 面 代码 定义 一 条 简单 的 字符 串 ， 然 后 在 页 面 中 输出 显示 。 

S$str ='PHP is a popular general-purpose scripting language'; 

echo $str; 

输出 结果 如 下 。 

PHP is a popular general-purpose scripting language | 

< 注意 : 如 果 要 在 宇 符 串 中 表达 单 引号 自身 ， 须 在 它 的 前 面 加 个 反 斜 线 (\) 来 转 义 。 如 果 要 表达 ， 

一 个 反 针 线 自身 ， 则 用 两 个 反 斜 线 (\) 。 其 他 任何 方式 的 反 儿 线 都 会 被 当成 反 斜 线 本 身 ， 
也 就 是 说 ， 如 果 想 使 用 其 他 转 义 序列 ， 如 \、\n 等 ， 并 不 代表 任何 特殊 含义 ， 就 单纯 是 这 
两 个 字符 本 身 。 | 


| 视频 讲解 


17.2.2 双 引 号 


如 果 字 符 串 被 包围 在 双 引 号 〈") 中 ，PHP 将 对 一 些 特殊 的 字符 进行 解析 。 与 单 引号 字符 串 一 样 ， 
转 义 任何 其 他 字符 都 会 导致 反 斜 线 被 显示 出 来 。 
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”有 注 意 : 双 引 号 中 的 内 容 是 经 过 PHP 的 语法 分 析 器 解析 过 的 ， 任 何 变量 在 双 引 号 中 都 会 被 转换 为 
它 的 值 进行 输出 ; 而 单 引号 的 内 容 是 “所 见 即 所 得 ”的 ， 无 论 有 无 变量 ， 都 被 当 作 普通 字 
| 符 囊 进行 原样 输出 。 因 此， 在 进行 SQL 查询 之 前 ， 所 有 字符 囊 都 必须 加 单 引号 ， 以 避免 


贷 站 可 能 的 注入 漏洞 和 SQL 错误 。 
【示例 】 下 面 示例 将 两 个 子 字符 串 连接 在 一 起 显示 。 


Sjuice="\" 床 前 明月 光 ， 疑 是 地 上 霜 。"; 
echo "$juice 举 头 望 明月 ， 低 头 思 故 乡 。\""; 


输出 结果 如 下 。 
" 床 前 明月 光 ， 疑 是 地 上 霜 。 举 头 望 明 月 ， 低 头 思 故 乡 。" 


17.2.3 ”heredoc 结构 
heredoc 结构 就 是 在 <<< 运 算 符 之 后 定义 一 个 标识 符 , 然后 换行 定义 字符 串 本 身 , 最 后 换行 使 用 前 


， 面 定义 的 标识 符 作为 结束 标志 即 可 。 
【示例 1】 下 面 示例 将 两 行 信息 视 为 heredoc 结构 的 字符 串 ， 最 后 通过 变量 把 它 显 示 出 来 。 


S$str = <<<tangshi 

" 床 前 明月 光 ， 疑 是 地 上 霜 。<br> 
举 头 望 明 月 ， 低 头 思 故 乡 。" 

tangshi; 

echo $str; 


输出 结果 如 下 。 
" 床 前 明月 光 ， 疑 是 地 上 和 霜 。 
| 举 头 望 明 月 ， 低 头 思 故 乡 。" 
| 人) 注意 : 最 后 一 行 结束 标识 符 可 能 有 一 个 分 号 (;) 外 ， 绝 对 不 能 包含 其 他 字符 。 因 此 标识 符 不 能 
缩 进 ， 分 号 的 前 后 也 不 能 有 任何 空白 或 制 表 符 。 
【示例 2】 下 面 示例 演示 了 在 heredoc 结构 中 显示 变量 信息 。 
$sl="W 床 前 明月 光 ， 疑 是 地 上 霜 。"; 
$s2 =" 举 头 望 明月 ， 低 头 思 故 乡 。\""; 
$str = <<<tangshi 
$sl<br> 
$s2 
tangshi; 
echo $str; 
输出 结果 如 下 。 


””" 床 前 明月 光 ， 疑 是 地 上 震 。 
| 举 头 望 明月 ， 低 头 思 故 乡 。" 


”4 的 注意 ，heredoc 结构 不 能 用 来 初始 化 类 的 属性 。 
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17.2.4 ”nowdoc 结构 


nowdoc 结构 与 heredoc 结构 ， 但 是 nowdoc 结构 中 不 进行 解析 操作 。 如 果 说 heredoc 结构 类 似 于 Ee bd 
双 引 号 字符 串 ， 那 么 nowdoc 结构 就 类 似 于 单 引 号 字符 串 。 

nowdoc 结构 适合 用 于 嵌入 PHP 代码 或 其 他 大 段 文 本 而 无 须 对 其 中 的 特殊 字符 进行 转 义 。nowdoc ， 

结构 的 标记 为 <<<， 在 后 面 的 标识 符 需要 用 单 引 号 括 起 来 ， 如 <<<EOT。 heredoe 结构 的 所 有 规则 也 同 | Note 
样 适用 于 nowdoc 结构 ， 如 结束 标识 符 的 规则 。 | 
【示例 】 以 17.2.3 节 最 后 一 个 示例 为 基础 ， 把 开始 标识 符 加 上 单 引号 ， 可 定义 一 个 nowdoc 结构 。 

61= 床 前 明月 光 ， 疑 是 地 上 荐 。" 

$s2 = " 举 头 望 明月 ， 低 头 思 故乡 。\""; 

$str = <<<'tangshi' 

$sl<br> 

$s2 

tangshi; 

echo $str; 


输出 结果 如 下 。 


$sl 
$s2 


而 不 是 如 下 所 示 。 


" 床 前 明月 光 ， 疑 是 地 上 霜 。 
举 头 望 明 月 ， 低 头 思 故 乡 。" 


17.3 ”使 用 字符 事 


字符 串 操作 在 PHP 编程 中 比较 常用 ， 几 乎 所 有 的 输入 、 输 出 都 需要 与 字符 串 打 交 
道 ， 因 此 了 解 并 熟悉 字符 串 的 一 般 操 作 方 法 就 显得 很 重要 。 
同学 们 可 以 扫描 右 侧 二 维 码 了 解 PHP 字符 串 处 理 函 数 的 列表 说 明 。 


17.3.1 连接 字符 串 
连接 字符 串 可 以 使 用 点 号 〈.) 运算 符 ， 该 运算 符 能 把 两 个 或 两 个 以 上 的 字符 串 连 接 成 一 个 字 视频 讲解 
符 串 。 
【示例 1】 下 面 示例 演示 了 如 何 连接 字符 串 。 
$s1=" 海 内存 知 己 ， 天 涯 若 比 邻 。"; 
$s2 = "无 为 在 歧路 ， 儿 女 共 沾 巾 。"; 
S$str= $sl.$s2; 
echo $str; 
输出 结果 如 下 。 


海内 存 知己 ， 天 涯 若 比邻 。 无 为 在 歧路 ， 儿 女 共 沾 巾 。 
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| 【示例 2】PHP 允许 在 双 引 号 中 直接 包含 字符 串 变 量 ， 因 此 可 以 使 用 这 种 格式 实现 字符 串 连接 
| 效果 。 
。 gs1 = "海内 存 知 已， 天 涯 车 比邻 。 
食 六 | $s2 = "无 为 在 歧路 ， 儿 女 共 沾 巾 。"; 
A | Sstr= "$s1$s2"; 
Note Soho tits, 
| 输出 结果 如 下 。 
海内 存 知己 ， 天 涯 若 比邻 。 无 为 在 歧路 ， 儿 女 共 沾 巾 。 


| 17.3.2 ”去 除 首尾 空 字符 


| 当 输入 信息 时 ， 经 常会 无 意 输 入 多 余 的 空格 。 当 在 脚本 中 处 理 这 些 字符 信息 时 ， 是 不 允许 出 现 空 
， 格 和 特殊 字符 的 ,此 时 就 需要 去 除 字符 串 中 的 空格 和 特殊 字符 。 PHP 提供 了 3 个 函数 用 于 处 理 空 字符 
| 问题 。 
| 回 “trim0: 去 除 字符 串 左 、 右 两 边 的 空格 和 特殊 字符 。 

回 ltrim0: 去 除 字符 串 左边 的 空格 和 特殊 字符 。 

回 rtrim0: 去 除 字符 串 右边 的 空格 和 特殊 字符 。 

1. trim0 函 数 
| trim0 函 数 用 于 去 除 字 符 串 首尾 空格 和 特殊 字符 ， 并 返回 去 掉 空格 和 特殊 字符 后 的 字符 串 。 具 体 
”用 法 如 下 所 示 。 
| string trim( string $str [, string $charlist = " \tin\r\OWx0B" ] ) 


参数 说 明 如 下 。 

回 str: 待 处 理 的 字符 串 。 

回 “charlist， 可 选 参数 ， 列 出 所 有 希望 过 滤 的 字符 ， 也 可 以 使 用 "…" 列 出 一 个 字符 范围 。 
在 默认 状态 下 ， 如 果 不 指定 第 二 个 参数 ，trim0 函 数 将 去 除 下 面 这 些 字符 。 
"": 普通 空格 符 。 

Mt": 制 表 符 。 

"ma": 换行 符 。 

ns 回 车 符 。 

0": 空 字 节 符 。 

"x0B": 垂直 制 表 符 。 

【示例 1】 下 面 示例 演示 了 如 何 使 用 tim0 函 数 清除 指定 字符 串 前 后 空格 。 
$sl=" ” 白 日 依 山 尽 ， 黄 河 入 海流 。 


$s2="” 欲 穷 千里 日 ， 更 上 一 层 楼 。 四 
Sstr = trim($s1) . tim(Ss2): 

echo $str; 

输出 结果 如 下 。 

白 日 依 山 尽 ， 黄 河 入 海流 。 欲 穷 千里 日， 更 上 一 层 楼 。 


图 图 图 图 图 加 
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2. ltrim0 函 数 

ltrim0 函 数 用 于 删除 字符 串 开头 的 空白 字符 ， 或 其 他 字符 ， 具 体 用 法 如 下 所 示 。 
string ltrim( string $str [, string Scharacter mask ] ) 

该 函数 包含 两 个 参数 ， 参 数 说 明 可 以 参考 tim0 函 数 。 | 

【示例 2】 以 示例 1 为 基础 ， 把 trim0 函 数 蔡 换 为 lrim0 函 数 ， 清 除 指定 字符 串 开头 空格 。 Note 
$s1 ="” 自 日 依 山 尽 ， 黄 河 入 海流 。 | 


$s2="” 欲 穷 千里 日 ， 更 上 一 层 楼 。 
$str= ltrim($s1). ltrim($s2); 

echo "<pre>$str</pre>"; 

输出 结果 如 下 。 


白 日 依 山 尽 ， 黄 河 入 海流 。 
欲 穷 千 里 目 ， 更 上 一 层 楼 。 


3. rtrim() 函 数 

rtrim0 函 数 能 够 删除 字符 串 末端 的 空白 字符 ， 或 者 其 他 字符 ， 具 体 用 法 如 下 所 示 。 
string rtrim( string $str [, string $character mask ] ) 

该 函数 包含 两 个 参数 ， 参 数 说 明 可 以 参考 tim0 函 数 。 

【示例 3】 以 示例 1 为 基础 ， 把 trim0 函 数 蔡 换 为 ltrim0， 清 除 指定 字符 串 开 头 空格 。 
S$sl1=" 白 日 依 山 尽 ， 黄 河 入 海流 。 


1 


$s2 =" ” 欲 穷 千里 目 ， 更 上 一 层 楼 。 
Sstr= rtrim($s1). rtrim($s2); 

echo "<pre>$str</pre>"; 

输出 结果 如 下 。 


白 日 依 山 尽 ， 黄 河 入 海流 。 ” 欲 穷 千里 目 ， 更 上 一 层 楼 。 


17.3.3” 转 义 、 还 原 字符 串 


字符 串 转 义 、 还 原 有 两 种 方法 ， 手动 转 义 、 还 原 和 自动 转 义 、 还 原 。 下 面 分 别 进行 讲解 。 

1. 手动 转 义 、 还 原 

是 转 义 符 ， 紧 跟 在 后 面 的 第 一 个 字符 将 变 得 没有 意义 ， 或 者 有 特殊 意义 。 例 如 ， 如 果 在 字 | 
符 串 中 显示 单 引 号 或 双 引号 ， 可 以 在 这 些 字符 前 面 加 进行 转 义 ， 转 义 为 普通 的 字符 ， 这样 就 会 在 字 
符 串 中 显示 它们 。 

【示例 1】 下 面 示例 使 用 转 义 字符 "对 字符 "进行 转 义 显示 。 

$sl = "\" 欲 穷 千 里 目 ， 更 上 一 层 楼 \" 出 自 唐 。 王 之 澳 。《 登 难 省 楼》。 全 诗 : " 白 日 依 山 尽 ， 黄 河 入 海流 。 欲 穷 


下 里 上 了 更 止 一 层 楼 
echo $sl; 


“335。 


网 半 设计 与 网 站 建设 从 入 门 到 精通 ( 微 课 精 编 版 ) 


输出 结果 如 下 。 
" 欲 穷 千里 目 ， 更 上 一 层 楼 "出 自 唐 。 王 之 澳 。《 登 大 省 楼 》。 全 诗 : ' 白 日 依 山 尽 ， 黄 河 入 海流 。 欲 穷 千里 目 ， 


”更 上 一 层 楼 。' 


Note 


痊 提示 : 对 于 简单 的 字符 囊 建议 采用 手动 方法 进行 字符 囊 转 义 ,而 对 于 数据 量 较 大 的 字符 囊 ， 建 议 
采用 自动 转 义 函数 实现 字符 囊 的 转 义 。 
2， 自 动 转 义 、 还 原 
PHP 提供 多 个 自动 转 义 、 还 原 字符 串 的 函数 ， 方 便 用 户 使 用 ， 具 体 说 明 如 下 。 
回 addslashesO 函 数 
addslashesO 函 数 能 够 在 某 些 字符 前 加 上 了 反 斜 线 ， 如 单 引号 (D)、 双 引号 (")、 反 斜 线 (\) 和 


| NULL (NULL 字符 )， 具 体 用 法 如 下 所 示 。 


string addslashes( string $str ) 


回 ”stripslashes() 函 数 
stripslashes0 函 数 能 够 返回 反 转 义 后 的 字符 串 ， 具 体 用 法 如 下 所 示 。 


string stripslashes( string $str ) 
【示例 2】 以 示例 1 为 基础 , 分 别 使 用 addslashes0 和 stripslashes0 〇 函数 对 变量 $sl 中 的 字符 串 进 行 


名 和 光 原 换 作 ， 


$sl = "W" 欲 穷 千里 目 ， 更 上 一 层 楼 \" 出 自 唐 。 王 之 澳 。《 登 难 淮 楼 》。 全 诗 : ' 白 日 依 山 尽 ， 黄 河 入 海流 。 和 欲 穷 


Ta 更 上 一 层 楼 。": 


$sl = addslashes(Ss1); 
echo $s1 . "<br>"; 


$s1 = stripslashes($s1):; 
echo $s1 . "<br>"; 


输出 结果 如 下 。 
\" 欲 穷 千里 目 ， 更 上 一 层 楼 \" 出 自 唐 。 王 之 澳 ，《 登 鸡 八 楼 》。 全 诗 :\ 白 日 依 山 尽 ,黄河 入 海流 。 和 欲 穷 千 里 目 ， 


| 更 上 一 层 楼 。v 


" 欲 穷 干 里 目 ， 更 上 一 层 楼 "出 自 唐 。 王 之 澳 。《 登 芍 省 楼 )。 全 诗 : ' 白 日 依 山 尽 ， 黄 河 入 海流 。 欲 穷 千里 目 ， 


| 更 上 一 层 楼 。 
”内 提示 ， 当 把 用 户 提交 的 数据 写 入 数据 库 之 前 ， 建 议 使 用 addslashes0 函 数 进行 字符 囊 转 义 ， 以 旬 


特殊 字符 未 经 转 义 而 在 插入 数据 库 时 出 现 错误 ， 当 从 数据 库 读 取 数据 后 ， 也 相应 地 使 用 
stripslashesO 函 数 进行 还 原 ， 但 数据 在 插入 数据 库 之 前 必须 再 次 进行 转 义 。 


3. 限定 转 义 、 还 原 

PHP 使 用 addcslashes0 和 stripcslashesO 函 数 实 现 对 指定 范围 内 的 字符 串 进行 自动 转 义 、 还 原 。 
(1) addcslashes0 〇 函数 

addcslashes() 函 数 能 够 根据 指定 的 字符 范围 ， 对 字符 串 进行 转 义 ， 具 体 用 法 如 下 所 示 。 

string addeslashes( string $str , string $charlist ) 

参数 说 明 如 下 。 

str: 要 转 义 的 字符 。 
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回 “charlist: 定义 转 义 字符 列表 。 当 定义 字符 序列 时 ， 需 要 确实 知道 介 于 设置 的 开始 及 结束 范围 
之 内 的 都 是 些 什么 字符 。 | 
【示例 3】 下 面 示例 使 用 addcslashesO 函 数 把 所 有 字母 进行 转 义 显示 。 | 
$sl = "abcdefg"; 全 丰 
$sl = addcslashes($s1,'A..z"):// 所 有 大 小 写字 母 均 被 转 义 | 
echo $sl; Note 
输出 结果 如 下 。 
\a\b\c\d\e\f\g 
如 果 字 符 串 中 出 现 分 隔 符 、 换 行 符 、 回 车 符 等 特殊 字符 ， 也 会 被 一 并 转 义 。 | 
人 注意 ;当选 择 对 字符 0、a、b、f、n、r、t 和 v 进 行 转 义 时 需要 小 心 ， 它 们 将 被 转换 成 \0、\a、 中、 
fn、\r、 Wt 和 Ww。 在 PHP 中 ， 只 有 \0 (NULL) 、\r ( 回 车 符 ) 、 (换行 符 ) 和 \t ( 制 
表 符 ) 是 预定 义 的 转 义 序列 ， 而 在 C 语言 中 ， 上 述 的 所 有 转换 后 的 字符 都 是 预定 义 的 转 义 | 
序列 。 | 


(2) stripcslashes0 〇 函数 
stripcslashes0 函 数 反 引用 一 个 使 用 addcslashesO) 函 数 转 义 的 字符 串 ， 有 具体 用 法 如 下 所 示 。 


string stripcslashes( string $str ) 
【示例 4】 在 上 面 示例 基础 上 ， 使 用 stripcslashes0 函 数 把 所 有 转 义 字符 反 转 回 来 。 


$sl = "abcdefg"; 

$sl = addcslashes($s1.A..z): 
echo $s1 . "<br>"; 

$s1 = stripcslashes($s1); 
echo $s1 . "<br>"; 


输出 结果 如 下 。 


\a\b\c\d\e\f\g 
cdeg 


通过 输出 结果 可 以 看 到 ， 部 分 转 义 字符 无 法 再 反 转 回去 ， 因 为 它们 表示 特殊 的 意义 。 
17.3.4 获取 字符 串 长 度 


PHP 使 用 stlen0 函 数 获取 字符 串 的 长 度 ， 有 具体 用 法 如 下 所 示 。 
int strlen( string $string ) 
如 果 string 为 室 ， 则 返回 0。 

【示例 】 下 面 示例 使 用 strlen0 函 数 获取 字符 串 的 长 度 。 


$s1=" 白 日 依 山 尽 ， 黄 河 入 海流 。 欲 穷 千里 目 ， 更 上 一 层 楼 。"; 
echo strlen($s1); 


返回 结果 如 下 。 
匡 
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， 岩 提示 : PHP 内 置 的 字符 事 长 度 函数 shlen0 无 法 正确 处 理 中 文字 符 事 ， 它 返回 的 只 是 字符 事 所 占 


Note 


四 
四 


17.3; 


在 PHP 中， 使 用 substr0 函 数 可 以 实现 截取 字符 串 ， 有 具体 用 法 如 下 所 示 。 
string substr( string $string , int $start [, int Slength ] ) 
参数 说 明 如 下 。 


的 字 节 数 。 对 于 GB2312 的 中 文 编码 ，strlen(0) 函 数 得 到 的 值 是 汉字 个 数 的 两 倍 ， 而 对 于 
UTF-8 编码 的 中 文 ， 一 个 汉字 占 3 个 字 节 。 获取 中 文字 符 长 度 , 建议 使 用 mb _strlen0 函 数 。 


5 截取 字符 串 


string: 输入 字符 串 。 必 须 至 少 有 一 个 字符 。 

start: 如 果 start 是 非 负数 , 返回 的 字符 串 将 从 string 的 start 位 置 开始 ， 从 0 开始 计算 。 例如， 
在 字符 串 "abcdef" 中 ， 在 位 置 0 的 字符 是 "a"， 位 置 2 的 字符 串 是 "ec" 等 。 如 果 start 是 负数 ， 
返回 的 字符 串 将 从 string 结尾 处 向 前 数 第 start 个 字符 开始 。 如 果 string 的 长 度 小 于 start， 将 
返回 false。 

length: 如 果 提 供 了 正 数 的 length, 返回 的 字符 串 将 从 start 处 开始 最 多 包括 length 个 字符 ( 取 
决 于 string 的 长 度 ) 。 如 果 提 供 了 负数 的 length， 那 么 string 末尾 处 的 许多 字符 将 会 被 漏 掉 。 
如 果 start 是 负数 ， 则 从 字符 串 尾部 算 起 。 如 果 start 不 在 这 段 文 本 中 ， 那 么 将 返回 一 个 空 字 
符 串 。 如 果 提 供 了 值 为 0，false 或 NULL 的 length， 那 么 将 返回 一 个 空 字符 串 。 如 果 没 有 提 
供 length， 返 回 的 子 字符 串 将 从 start 位 置 开始 直到 字符 串 结 尾 。 


【示例 】 下 面 示例 演示 了 使 用 substr0 函 数 截取 字符 串 ， 以 及 使 用 中 括号 语法 获取 单个 字符 的 方法 。 


echo substr(abcdef, 1); /ll bcdef 

echo substr('abcdef, 1, 3); llbcd 

echo substr(abcdef, 0, 4): /abcd 

echo substr('abcdef, 0, 8): /abcdef 

echo substr(abcdef, -1, 1); uf 

/ 访问 字符 串 中 的 单个 字符 ， 也 可 以 使 用 中 括号 
S$string = 'abcdef; 

echo $string[0]: la 

echo $string[3]; ld 


echo $string[strlen($string)-1]; Uf 


| 次 提示 :使 用 substr0 画 数 在 检 取 中 文字 符 囊 时 ， 如 果 检 取 的 字符 囊 个 雪 是 奇效 ， 政 么 就 会 寻 到 和 


| 17.3. 


取 的 中 文字 符 串 出 现 乱码 ， 因 为 一 个 中 文字 符 由 2、3 个 字 节 组 成 ， 所 以 substr0 函 数 适 用 
于 对 英文 字符 串 的 截取 ， 如 果 想 要 对 中 文字 符 串 进行 截取 ， 而 且 要 避免 出 现 乱码 ， 最 好 使 
用 mb _substrO 函 数 。 


6 ”比较 字符 串 


字符 串 


般 常 用 一 运算 符 来 比较 两 个 字符 串 是 否 相等 。 如 果 进 行 一 些 更 复杂 的 比较 ， 则 建议 使 用 PHP 
比较 函数 : 使 用 stcmpO 和 streasecmp0 〇 函数 按照 字 节 顺序 进行 比较 ,使 用 stmatcmp0O 函 数 按照 


自然 排序 法 进行 比较 ， 使 用 stmemp0 函 数 指定 长 度 进行 比较 。 下 面 分 别 对 这 3 种 方法 进行 详细 讲解 。 


ls 


按 字 节 比 较 


按 字 节 进 行 字 符 串 比较 的 方法 有 两 种 ， 分 别 是 利用 strcmp0 和 strcasecmp0 函 数 ， 其 中 stremp0 函 
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数 区 分 字符 的 大 小 写 ， 而 strecasecmp0 函 数 不 区 分 字符 的 大 小 写 。 由 于 这 两 个 函数 的 实现 方法 基本 相 
同 ， 这 里 只 介绍 stremp0 函 数 。 | 
strcmp(O 函 数 的 具体 用 法 如 下 所 示 。 
int strcmp(string $strl , string $str2) 僵 凡 
如 果 strl 小 于 st2， 则 返回 值 小 于 0， 如 果 strl 大 于 st2， 则 返回 值 大 于 0， 如 果 二 者 相等 ， 则 | NM 
ote 
返回 值 等 于 0。 | 
【示例 1】 下 面 示例 简单 比较 两 个 字符 串 是 | 
S$varl = "Hello": 


$var2 = "hello"; 

if (stremp($varl, Svar2) (== 0) { 
echo ' 两 个 字符 串 不 相等 

} 

输出 结果 如 下 。 

两 个 字符 串 不 相等 


交 提示 : 在 Web 开发 中 ,字符 囊 比 较 的 应 用 是 非常 广泛 的 。 例 如， 使 用 strempO 函 数 比较 在 用 户 登 
录 系 统 中 输入 的 用 户 名 和 密码 是 否 正确 。 如 果 在 验证 用 户 名 和 密码 时 不 使 用 此 函数 ， 那 么 
输入 的 用 户 名 和 密码 无 论 是 大 写 还 是 小 写 ， 只 要 正确 即 可 登录 ， 使 用 了 strcmp(O) 函 数 之 后 | 
就 避免 了 这 种 情况 ， 即 使 正确 , 也 必须 大 小 写 匹配 才 可 以 登录 ,从 而 提高 了 网 站 的 安全 性 。 


2. 按 自然 排序 比较 


自然 排序 法 比较 的 是 字符 串 中 的 数字 部 分 ， 将 字符 串 中 的 数字 按照 大 小 进行 比较 。PHP 通过 | 
strnatcemp0 〇 函数 来 实现 的 ， 具 体 用 法 如 下 所 示 。 | 


int strnatemp(string $strl , string $str2) 


该 函数 实现 了 以 人 类 习惯 对 数字 型 字符 串 进行 排序 的 比较 算法 ， 这 就 是 自然 顺序 。 注 意 ， 该 比较 
区 分 大 小 写 。 返 回 值 与 stremp0 函 数 相同 。 | 
【示例 2】 下 面 示例 定义 一 个 数组 ， 其 中 包含 一 组 图 片 文件 名 ， 然 后 使 用 自 定义 排序 函数 taint 
对 其 进行 排序 ， 排 序 时 调用 的 排序 函数 分 别 为 stcemp0 函 数 和 strnatemp0 〇 函数 。 
Sarrl = $arr2 = array("img12.png", "img10.png", "img2.png", "imgl.png"); 
echo "字符 串 标准 比较 : <br>"; 
usort($arrl, "stremp"); 
print r($arrl); 
echo "<br> 自 然 排序 法 : <br>"; 
Usort($arr2, "stmatcmp'"); 
Print r(Sarr2); 
输出 结果 如 下 。 
标准 字符 串 比 较 : 
Aray ( 
[0] => imgl.png 
[1 => imgl0.png 
辐 ] imgl2.png 
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A 
[> 
Eh 

DB] 一 img?2.png 


j 

| 自然 排序 法 : 

| Aray ( 

| [0] => imgl.png 

| [1] => img2.png 

‘Note [2 = imgl0.png 
| B]=> imgl2.png 

) 


3. 按 指 定 长 度 比较 
| strncmp0 函 数 能 够 根据 指定 的 长 度 来 比较 两 个 字符 串 ， 具 体 用 法 如 下 所 示 。 
| int strncmp(string $strl , string $str2 , int $len) 
参数 strl 和 str2 表示 两 个 比较 的 字符 串 ，len 表示 最 大 比较 长 度 。 
【示例 3】 下 面 示例 简单 比较 两 个 文件 名 中 名 称 部 分 字符 串 是 否 相同 。 
S$varl = "1.png"; 
$var2 = "1.jpg"; 
下 (stmcmp($varl, Svar2, 2) ! 一 0) { 
echo ' 两 个 文件 名 不 相等 
}else{ 
echo 两 个 文件 名 相等 : 
} 
输出 结果 如 下 。 
两 个 文件 名 相等 


17.3.7 ”检索 字符 串 


PHP 提供 多 个 检索 字符 串 的 函数 ， 具 体 说 明 如 下 。 
1.strstr() 函 数 
strstr0 函 数 能 够 查找 字符 串 中 的 一 部 分 ， 如 果 没 有 发 现 则 返回 false， 具 体 用 法 如 下 所 示 。 
string strstr(string $haystack , mixed $needle [, bool $before_needle = false ]) 
参数 说 明 如 下 。 
| 回 “haystack: 输入 字符 串 。 
回 needle: 查找 的 字符 串 ， 如 果 不 是 一 个 字符 串 ， 则 将 被 转化 为 整 型 并 且 作为 字符 的 序号 使 
回 “ before needle: 如 果 为 tue， 则 返回 needle 在 haystack 中 的 位 置 之 前 的 部 分 。 
【示例 1】 下 面 示例 演示 了 strstr0 函 数 的 基本 用 法 。 
Semail = 'zhangsan(@163.com'; 
$domain = strstr($email, '@"); 
echo $domain: 
| echo "<br>"; 
| Suser = strstr(Semail. '@', true); ” // 从 PHP5.3.0 起 


echo $user; 
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输出 结果 如 下 。 


@163.com 
zhangsan 


准 提示 : 本 函数 区 分 大 小 写 ， 如 果 想 要 不 区 分 大 小 写 ， 可 以 使 用 ststr0 函 数 。 00 
Jote 


元 数 正好 相反 ， 该 函数 是 从 字符 囊 右 侧 的 位 置 开 始 检 索 子 字符 囊 。 


2.，substr_count0 函 数 
使 用 substr_countO 函 数 能 够 检索 子 串 出 现 的 次 数 ， 有 具体 用 法 如 下 所 示 。 
int substr_count(string $haystack , string $needle [, int $offset = 0 [, int Slength ]]) 


参数 说 明 如 下 。 
haystack: 在 此 字符 串 中 进行 搜索 。 | 
needle: 要 搜索 的 字符 串 。 
offset: 开始 计数 的 偏 移 位 置 。 | 
length: 指定 偏 移 位 置 之 后 的 最 大 搜索 长 度 。 如果 偏 移 量 加 上 这 个 长 度 的 和 大 于 haystack 的 | 
总 长 度 ， 则 抛 出 警告 信息 。 | 
【示例 2】 下 面 示例 演示 了 substr_countO 函 数 比较 不 同 参数 设置 的 返回 值 。 

$text = 'This is a test'; 

echo strlen($text); / 14 

echo substr_count($text "is"); /2 

/ 字符 串 被 简化 为 sis a test， 因 此 输出 1 

echo substr_count($text, 'is', 3); 

/ 字符 串 被 简化 为 si， 所 以 输出 0 

echo substr_count($text, 'is', 3, 3); 

/ 因为 5+10> 14， 所 以 生成 警告 

echo substr_ count($text, "is', 5, 10); 

// 输出 1， 因 为 该 函数 不 计算 重 肝 字符 串 

Stext2 = 'gcdgcdged'; 

echo substr_count($text2, 'gcdged'): 
痊 提 示 : 检索 子囊 出 现 的 次 数 一 般 常用 于 搜索 引擎 中 ， 针 对 子囊 在 字符 串 中 出 现 的 次 数 进行 统计 ， 


便于 用 户 第 一 时 间 掌 握 子囊 在 字符 串 中 出 现 的 次 数 。 | 


17.3.8 ”替换 字符 串 


字符 串 蔡 换 可 以 通过 下 面 两 个 函数 来 实现 。 

1. str_ireplaceO 函 数 

str_ireplaceO 函 数 使 用 新 的 字符 串 〈 子 串 ) 替换 原始 字符 串 中 被 指定 要 蔡 换 的 字符 串 ， 具体 用 法 | 
如 下 所 示 。 

mixed str_ireplace(mixed Ssearch , mixed Sreplace , mixed $subject [, int &$count ]) 

参数 说 明 如 下 。 

search: 要 搜索 的 值 。 | 


图 图 图 加 
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replace: 指定 替换 的 值 。 

回 ”subject， 要 被 搜索 和 替换 的 字符 串 或 数组 。 

回 ”count: 可 选 参数 ， 如 果 设 定 了 ， 将 会 设置 执行 蔡 换 的 次 数 。 

如 果 参 数 search 和 replace 为 数组 ， 那 么 str replace0O 函 数 将 对 subject 做 映射 替换 。 如 果 replace 
的 值 的 个 数 少 于 search 的 个 数 ,多 余 的 蔡 换 将 使 用 空 字 符 串 来 进行 .如 果 search 是 一 个 数组 , 而 replace 
是 一 个 字符 串 , 那么 search 中 每 个 元 素 的 替换 将 始终 使 用 这 个 字符 串 。 如 果 search 或 replace 是 数组 ， 
它们 的 元 素 将 从 头 到 尾 一 个 个 处 理 。 

【示例 1】 下 面 示例 使 用 str_ireplace(O) 函 数 蔡 换 HTML 字符 串 中 的 BODY 为 black。 

Sbodytag = str_ireplace("%body%", "black", "&lt:body text=%BODY%&gt:"); 

echo $bodytag; 

输出 结果 如 下 。 

<body text=black> 


| 尖 提示 : str_ ireplaceO 函 数 在 执行 替换 操作 时 不 区 分 大 小 写 ， 如 果 需 要 对 大 小 写 加 以 区 分 ， 可 以 使 


用 str_replace0 函 数 。 


2.，substr_replace() 函 数 
substr_ replaceO) 函 数 对 指定 字符 串 中 的 部 分 字符 串 进行 蔡 换 ， 有 具体 用 法 如 下 所 示 。 
mixed substr_ replace(mixed $string , mixed Sreplacement , mixed $start [, mixed $length ]) 


参数 说 明 如 下 。 
回 string: 输入 字符 串 。 如 果 是 一 个 数组 ， 那 么 该 函数 也 将 返回 一 个 数组 。 
replacement: 替换 字符 串 。 
start: 如 果 为 正 数 ， 蔡 换 将 从 string 的 start 位 置 开始 ; 如果 为 负数 ， 蔡 换 将 从 string 的 倒数 
第 start 个 位 置 开 始 。 
length: 如 果 设 定 了 这 个 参数 并 且 为 正 数 ， 表 示 string 中 被 替换 的 子 字符 串 的 长 度 。 如 果 设 
定 为 负数 ， 它 表示 待 替 换 的 子 字 符 串 结尾 处 距离 string 末端 的 字符 个 数 。 如 果 没 有 提供 此 参 
数 ， 那 么 它 默认 为 strlen(string)， 即 字符 串 的 长 度 。 当 然 ， 如 果 length 为 0， 那 么 这 个 函数 
的 功能 为 将 replacement 插入 string 的 start 位 置 处 。 
【示例 2】 下 面 示例 演示 当 substr_replace0 函 数 设置 不 同 的 参数 时 ， 所 蔡 换 的 结果 ， 演 示 效 果 如 

17.1 所 示 。 

Svar ='ABCDEFGH:/MNRPQR/': 

echo "原始 字符 串 : Svar<hr />\n"; 

/# 这 两 个 例子 使 用 "bob"” 替换 整个 Svar */ 

echo substr replace($var, 'bob', 0) . "<br />\n"; 

echo substr replace($var, 'bob', 0, strlen($var)) . "<br />\n"; 

盯 将 "bob" 插入 $var 的 开头 处 */ 

echo substr replace($var, 'bob', 0, 0) . "<br />\n"; 

翌 下 面 两 个 例子 使 用 "bob" 蔡 换 Svar 中 的 "MNRPQR"*/ 

echo substr_replace($var, "bob', 10, -1) . "<br />\n"; 

echo substr Teplace($var, ‘bob', -7, -1) . "<br />\n"; 

/# 从 Svar 中 删除 "MNRPQR" */ 

echo substr replace($var ", 10, -1) . "<br />\n"; 


四 
四 


加 
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o 
© 


原始 字符 串 - ABCDEFGEHVMNRPQR/ 


bob 
bob 
bobABCDEFGH:/MNRPQR/ 


ABCDEFGH:/bob/ 
ABCDEFGH:/bob/ 
ABCDEFGH:/ 


图 17.1 字符 串 蔡 换 操作 
17.3.9 格式 化 字符 串 


PHP 定义 了 一 系列 可 供 使 用 的 函数 来 重新 格式 化 字符 串 ， 下 面 分 别 进行 介绍 。 
1. HTML 格式 化 | 
nl2br0 函 数 将 字符 串 作 为 输入 参数 ， 用 HTML 中 的 <br 这 标记 代替 字符 串 中 的 换行 符 。 这 对 于 将 | 
一 个 长 字符 串 显示 在 浏览 器 中 是 非常 有 用 的 。 | 
【示例 1】 下 面 示例 使 用 这 个 函数 来 格式 化 顾客 反馈 信息 并 将 它 返回 浏览 器 中 。 
<p><?php echo nl2br($text); ?> </p> | 
深 提示 : HTML 将 忽略 纯 空格 ， 所 以 如 果 不 使 用 nl2brO 函 数 来 过 滤 这 个 输出 结果 ， 那 么 它 看 上 去 ， 
就 是 单独 的 一 行 。 | 
2. 打印 格式 化 | 
常用 echo 命令 将 字符 串 输出 到 浏览 器 。 PHP 也 支持 print0 函 数 , 它 实现 的 功能 与 echo 命令 相同 ，， 
但 具有 返回 值 ， 总 是 返回 1。 | 
使 用 printt0 和 sprintf0 函 数 还 可 以 实现 一 些 更 复杂 的 格式 。 它 们 的 工作 方式 基本 相同 ， 只 是 printf0 | 
函数 是 将 一 个 格式 化 的 字符 串 输出 到 浏览 器 中 ， 而 sprintf0 函 数 是 返回 一 个 格式 化 了 的 字符 串 。 | 
这 两 个 函数 的 基本 语法 如 下 。 
string sprintf(string format [, mixed args...]) 
int printf(string format [, mixed args...]) | 
传递 给 这 两 个 函数 的 第 一 个 参数 都 是 字符 串 格式 , 它们 使 用 格式 代码 而 不 是 变量 来 描述 输出 字符 | 
串 的 基本 形状 。 其 他 参数 是 用 来 蔡 换 格式 字符 串 的 变量 。 | 
【示例 2】 在 使 用 echo 时 ， 把 要 用 的 变量 直接 打印 至 该 行 中 ， 如 下 所 示 。 
echo "总 订单 数量 是 : $total."; 
要 使 用 printf0 函 数 得 到 相同 的 结果 ， 应 该 使 用 如 下 语句 。 
Printft" 总 订单 数量 是 : 9%s.", Stotal); | 
格式 化 字符 串 中 的 %s 是 转换 说 明 。 它 的 意思 是 用 一 个 字符 串 来 代替 。 在 这 个 例子 中 ， 它 会 被 已 | 
解释 成 字符 串 的 $total 代 蔡 。 如 果 保存 在 $total 变量 中 的 值 是 12.4， 这 两 种 方法 都 将 它 打 印 为 124。 | 
Printf0 函 数 的 优点 在 于 它 可 以 使 用 更 有 用 的 转换 说 明 来 指定 $total 为 一 个 浮 点 数 ， 它 的 小 数 点 后 | 
面 应 该 有 两 位 小 数 ， 如 下 所 示 。 | 


printf(" 总 订单 数量 是 : %.2f", StotaD; 
经 过 这 行 代码 的 格式 化 处 理 ， 存 储 在 $total 中 的 12.4 将 打印 为 12.40。 
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| 【示例 3】 可 以 在 格式 化 字符 串 中 使 用 多 个 转换 说 明 。 如 果 有 1n 个 转换 说 明 ， 在 格式 化 字符 串 后 
| 面 就 应 该 带 有 mn 个 参数 。 每 个 转换 说 明 都 将 按 给 出 的 顺序 被 一 个 重新 格式 化 过 的 参数 代 蔡 。 


printf(" 总 订单 数量 是 : %.2f ( 含 运费 %.2f) ",$total, Stotal shipping); 
会 二 | 在 这 里 ， 第 一 个 转换 说 明 将 使 用 变量 $total， 而 第 二 个 转换 说 明 将 使 用 变量 $total shipping。 
7 汉 提示， 每 一 个 转换 说 明 者 遵循 同样 的 格式 ， 如 下 所 示 : 
| %['padding character][-][width][.precision]type 
所 有 转换 说 明 都 以 % 开 始 。 如果 想 打印 一 个 % 符 号 ,必须 使 用 %%。 参数 padding_character 
是 可 选 的 。 它 将 被 用 来 填充 变量 直至 所 指定 的 宽度 。 该 参数 的 作用 就 像 使 用 计算 器 那样 
在 数字 前 面 加 零 。 默认 的 填充 字符 是 一 个 空格 ， 如 果 指 定 了 一 个 空格 或 0， 就 不 需要 使 用 
“” 作为 前 级 。 对 于 任何 其 他 填充 字符 ， 必 须 指 定 “” 作为 前 级 。 
字符 “-” 是 可 选 的 。 它 指明 该 域 中 的 数据 应 该 左 对 齐 ， 而 不 是 默认 的 右 对 齐 。 
参数 width 告诉 printf 0 函数 在 这 里 为 将 被 替换 的 变量 留 下 多 少 空间 ( 按 字符 计算 ) 。 
参数 precision 表示 必须 是 以 一 个 小 数 点 开始 。 它 指明 了 小 数 点 后 面 要 显示 的 位 数 。 
转换 说 明 的 最 后 一 部 分 是 一 个 类 型 码 。 其 支持 的 所 有 类 型 码 如 表 17.1 所 示 。 


表 17.1 转换 说 明 的 类 型 码 
类 型 说 了 明 
解释 为 整数 并 作为 二 进 制 数 输出 
解释 为 整数 并 作为 字符 输出 
解释 为 整数 并 作为 小 数 输出 
解释 为 双 精 度 并 作为 浮 点 数 输出 
解释 为 整数 并 作为 八进制 数 输出 
解释 为 字符 串 并 作为 字符 串 输出 
解释 为 整数 并 作为 非 指 定 小 数 输出 
解释 为 整数 并 作为 带 有 小 字母 a~f 十 六 进 制 数 输出 
解释 为 整数 并 作为 带 有 大 字母 a~f 十 六 进 制 数 输出 


当 在 类 型 转换 代码 中 使 用 printf0 函 数 时 ， 参 数 的 顺序 并 不 一 定 要 与 转换 说 明 中 的 顺序 相同 。 
3. 字符 串 大 小 写 


可 以 重新 格式 化 字符 串 中 的 字母 大 小 写 。 例 如 ， 如 果 电 子 邮件 中 的 主题 行 字符 串 是 以 gsubject 开 
| 始 ， 可 以 通过 几 个 函数 来 改变 它 的 大 小 写 。 这 些 函 数 的 功能 说 明 如 表 17.2 所 示 。 


xl“ ls le lo |» le lo |= 


表 17.2 字符 串 大 小 写 函 数 和 它们 的 效果 


明 


“函数 说 
| strtoupper() | 将 字符 串 转换 为 大 写 

| _sttolower0 | 将 字符 串 转换 为 小 写 

如 果 字 符 串 的 第 一 个 字符 是 字母 ， 就 将 
该 字符 转换 为 大 写 

将 字符 串 每 个 单词 的 第 一 个 字母 转换 为 
大 写 


strtoupper($subject) | FEEDBACK FROM WEB SITE 
strtolower($subject) | feedback from web site 


ucfirstO ucfirst($subject) Feedback from web site 


ucwords() ucwords($subject) Feedback From Web Site 
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4. 数字 格式 化 


数字 字符 帅 的 格式 化 也 比较 常用 ，PHP 定义 numiber format0 函 数 专用 数字 的 格式 化 显示 。 具体， 
用 法 如 下 所 示 。 


a 
string number format(float $number [, int $decimals = 0]) | 全 
string number format(float $number , int $decimals = 0 , string $dec_point =".", string $thousands sep =",") | 
vote 
参数 说 明 如 下 。 | 


回 number: 要 格式 化 的 数字 。 

回 decimals: 要 保留 的 小 数位 数 。 

dec_point: 指定 小 数 点 显示 的 字符 。 

thousands_sep: 指定 千 位 分 隔 符 显示 的 字符 。 | 

本 函数 可 以 接受 1 个 、2 个 或 者 4 个 参数 。 如 果 只 提供 第 一 个 参数 , number 的 小 数 部 分 会 被 去 掉 ， | 
并 且 每 个 干 位 分 隔 符 都 是 英文 小 写 逗 号 ",”; 如 果 提 供 两 个 参数 ，number 将 保留 小 数 点 后 的 位 数 到 设 | 
定 的 值 ， 其 余 同 上 ， 如 果 提供 了 4 个 参数 ，number 将 保留 decimals 个 长 度 的 小 数 部 分 ， 小 数 点 被 蔡 ， 
换 为 dec_point， 千 位 分 隔 符 蔡 换 为 thousands_sep。 | 

【示例 4】 下 面 示例 演示 了 number_format0 函 数 的 不 同 用 法 。 

Snumber = 1234.56; 

echo number format($number) . "<br>"; 

echo number format($number, 2,",,'") . "<br>"; 

Snumber = 1234.5678; 

echo number format($number, 2, … "); 

输出 结果 如 下 。 

1,235 


1 234,56 
1234.57 


17.3.10 ”分 割 字符 串 


PHP 通过 explode0 函 数 实现 字符 串 的 分 割 。explode0 函 数 能 够 使 用 一 个 字符 串 分 割 另 一 个 字符 | 局 A 
串 ， 具 体 用 法 如 下 所 示 。 | 
array explode( string $delimiter, string $string [, int $limit ] ) 
参数 说 明 如 下 。 
回 delimiter: 边界 上 的 分 隔 字符 。 如 果 delimiter 为 空 字符 串 〈"") ，explode0 函 数 将 返回 false。 | 
如 果 delimiter 所 包含 的 值 在 string 中 找 不 到 ,并 且 使 用 了 负数 的 limit, 那么 会 返回 空 的 array， | 
否则 返回 包含 string 单个 元 素 的 数组 。 | 


string: 输入 的 字符 串 。 | 
limit: 如 果 设 置 了 limit 参数 ， 且 是 正 数 ， 则 返回 的 数组 包含 最 多 limit 个 元 素 ， 而 最 后 那个 | 
元 素 将 包含 string 的 剩余 部 分 。 如 果 limit 参数 是 负数 ， 则 返回 除了 最 后 的 -limit 个 元 素 外 的 
所 有 元 素 。 如 果 limit 是 0， 则 会 被 当 作 1。 

本 函数 返回 由 字符 串 组 成 的 array， 每 个 元 素 都 是 string 的 一 个 子 串 ， 它 们 被 字符 串 delimiter 作 
为 边界 点 分 割 出 来 。 


图 图 
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> 
| 【示例 】 下 面 示例 演示 了 explode0 函 数 的 具体 用 法 。 
| $str ='oneltwolthreelfour; 
| Print_r(explode('l, $str, 2)); 
天 站 | print r(explode('|', $str, -1)); 


| 输出 结果 如 下 。 
Note | ee 
[0] 二 one 
[1] => twolthreelfour 
)] 
Array ( 
[0] => one 
[= two 
[2] => three 
) 


17.3.11 合成 字符 串 
implodeO 函 数 可 以 将 数组 的 内 容 组 合成 一 个 新 字符 串 ， 有 具体 用 法 如 下 所 示 。 
string implode(string $glue , array $pieces) 
string implode(array $pieces) 
参数 说 明 如 下 。 
回 glue: 默认 为 空 的 字符 串 。 
回 “pieces: 想 要 转换 的 数组 。 
implode0 函 数 返 回 一 个 字符 串 ， 其 内 容 为 由 glue 分 割 开 的 数组 的 值 。 
【示例 】 下 面 示例 调用 implodeO 函 数 把 数组 $array 的 内 容 用 "|" 符 号 连接 起 来 。 
Sarray = array('one', 'two', 'three', four); 
$comma_separated = implode("|", $array); 
echo $comma_separated; 
输出 结果 如 下 。 


one|twolthreelfour 


174 案例 实战 


| 下 面 将 结合 3 个 案例 学 习 PHP 字符 串 的 处 理 技巧 。 
17.4.1 ”查找 字符 串 的 公共 前 绥 


视频 讲解 本 例 设计 查找 字符 串 数组 中 每 个 元 素 的 公共 字符 串 前 缀 。 例如 , 在 数组 array("abcdefg", "abcdfio", 
"abedqle") 中 ， 每 个 元 素 都 包含 rabcd" 的 前 绥 字 符 。 
| 首先,， 从 第 一 个 字符 串 元 素 的 第 一 个 字符 开始 ， 依 次 与 其 他 元 素 的 字符 进行 比较 ， 都 相等 的 将 其 
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保存 起 来 ， 直 到 有 一 个 不 相等 就 结束 后 续 操作 。 | 
但 是 ， 如 果 数 组 中 有 的 字符 串 的 长 度 比 第 一 个 字符 串 的 长 度 小 时 ， 就 有 可 能 出 现 错误 。 因此 , 在 ， 


进行 比较 之 前 ， 需 要 把 数组 中 最 短 的 一 个 字符 串 找到 ， 然 后 以 它 为 参考 进行 比较 。 
设计 的 提取 字符 串 公共 前 级 的 函数 如 下 。 
function commonPrefix($arr) { 
$count = strlen ( $arr [0] ); // 先 计算 第 一 个 字符 串 的 长 度 Note 
for($i=0; $i<count ($arr ); Si++) { ”// 遍历 每 个 数组 中 每 个 字符 串 | 
让 (stlen ( $arr [$i] ) <= Scounb { ”// 找 出 最 短 的 字符 串 | 
$count = strlen (Sarr [$i] ); 。“// 存储 最 短 字符 串 的 长 度 


则 调用 函数 commonPrefix0， 提 取 公共 前 缀 字符 串 ， 输 出 'abc'。 
echo commonPrefix($arr); «~ //abe 


} | 

} | 
Sprefix ="; // 公共 前 缀 变量 | 
for($i= 0; $i < Scount; Si++) { / 以 最 短 长 度 为 选 代 次 数 进行 迭代 | 
Schar = $arr [0] [$i]:; // 从 左 到 右 ， 逐 一 获取 第 一 个 字符 串 的 每 个 字符 | 

Sflag = true; / 标识 变量 ， 初 始 为 真 | 

foreach ( Sarr as Sval ) { // 和 迭代 每 个 字符 串 | 

// 如 果 有 个 字符 串 的 对 应 位 置 字符 不 同 ， 则 结束 比较 ， 并 设置 标识 变量 为 假 | 

f(Schar != Sval [Si) { | 

Sflag = false; | 

break:; | 

} | 

} | 

if(! Sflag) // 如 果 标 识 变 量 为 假 ， 则 跳出 | 

break; | 

Sprefix .= $char; / 累积 记录 相同 的 前 缀 字符 | 

} | 
retum $prefix; / 最 后 返回 公共 前 缀 字符 串 | 

} | 
设计 如 下 字符 串 数组 。 | 
Sarr = array ( | 
'abcde', | 

‘abe', | 
'abcrhgh', | 

'abcdfe', | 

"abcfg' | 

’» 


17.4.2 ”表单 字符 串 的 处 理 


PHP 对 表单 提交 特殊 字符 的 过 滤 和 处 理 包 含 如 下 几 种 方法 。 | 二 
四 htmlspecialchars0: 将 &、 单 引号 、 双 引号 、 大 于 号 和 小 于 号 转换 为 HTML 格式 。 例如，“& 转 | 


成 &amp;”“" 转 成 &quot;”“' 转 成 &#039;”“< 转 成 &lt;:”“> 转 成 &gt;”。 | 
htmlentities0: 将 所 有 字符 都 转 成 HTML 格式 ， 除 特殊 字符 外 ， 还 包括 双 字 节 字 符 显示 成 编 | 
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豆 


码 等 。 
addslashes0: 单 双 引号 、 反 斜 线 以 及 空 字符 ， 加 上 反 斜 线 转 义 。 
stripslashes(): 去 掉 字 符 串 中 的 反 和 斜 线 字符 。 
quotemeta0: 加 入 引用 符号 ， 将 字符 串 中 含有 .、\、+、*、?、[、^、]、(、$、) 等 字符 的 前 
面 加 入 反 斜 线 "\" 符 号 。 
Note nl2br0: 将 换行 字符 转 成 <br>。 
回 strip_tags0: 去 掉 字符 串 中 任何 HTML 标记 和 PHP 标记 。 
加 ”mysql real escape_string0: 转 义 SQL 字符 串 中 的 特殊 字符 。 
【示例 】 下 面 示例 设计 一 个 用 户 反 馈 表 ， 表 单 结构 如 下 。 
<form method="post" action=""> 
姓名 : <input type="text" name="name" value="<?php echo Sname:?>"> 
邮箱 : <input type="text" name="email" value="<?php echo Semail?>"> 
网 址 : <input type="text" name="website"value="<?php echo S$website:?>"> 
评论 : <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea> 
性 别 : <input type="radio" name="gender" 
<?php if(isset($gender) && $gender 一 "female") echo "checked";?> value="female"> 女 性 
<input type="radio" name="gender" 
<?php if (isset(Sgender) && $gender 一 "male") echo "checked";?> value="male"> 男 性 
<input type="submit" name="submit" value=" 提 交 "> 
</form> 
| 设计 如 果 用 户 单 击 “ 提 交 ” 按 钮 后 ， 在 输入 字段 中 显示 值 。 在 输入 字段 的 value 属性 中 增加 一 小 
| 段 PHP 脚本 : name、email 和 website。 在 comment 文本 框 字段 中 , 把 脚本 放 在 <textarea> 与 </textarea> 
| 之 间 。 这 些 脚本 输出 gname、$email、$website 和 $comment 变量 的 值 。 对 于 单 选 按钮 组 ， 根 据 $gender 
| 变量 的 值 ， 确 定 哪个 单 选 按钮 设置 checked 属性 ， 定 义 选 中 状态 。 
| 在 PHP 脚本 中 ， 定 义 函数 test_input0 用 来 处 理 提交 表单 字符 串 ， 分 别 使 用 trim0 函 数 去 掉 字 符 串 
| 两 侧 的 空白 (多余 的 空格 、 制 表 符 、 换 行 )， 使 用 stripslashes0 函 数 删 除 用 户 输入 数据 中 的 反 斜 杠 (\)， 
使 用 htmlspecialchars() 函 数 转换 特殊 字符 串 。 
| function test_input($data) { 
Sdata = trim(Sdata); 
Sdata = stripslashes(Sdata); 
S$data = htmlspecialchars($data); 
return $data; 
中 


然后 ， 在 当前 页 面 获取 用 户 提交 的 数据 ， 并 进行 处 理 。 
| / 定义 变量 并 设置 为 空 值 


图 图 图 


| Sname = $email = $gender = $comment = $website = ""; 
| if($_SERVER["REQUEST METHOD"] — "POST") { 
| Sname = test input($_ POST["name"]); 

| Semail = test_input($_POST["email"]); 

| Swebsite = test_ input($_ POST["website"]): 

| $comment = test_ input($_ POST["comment"]); 

| Sgender = test_input($ POST["gender"]): 
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最 后 ， 输 出 显示 用 户 提交 的 信息 ， 在 显示 前 ， 先 使 用 isset0 函 数 检测 是 否 存在 对 应 信息 。 


<?php 

让 (isset($name) && $name) {echo "<p> 姓 名 =".Sname:} | 

if (isset(Semail) && $email) {echo "<p>Email=".$email:} | 会 内 
if (isset($website) && $website) {echo "<p> 网 址 =".$website;} A 
if (isset($gender) && $gender—"female") echo "<p> 姓 名 = 女 "; I 
if(isset(Sgender) && Sgender—"male") echo "<p> 姓 名 = 男 " | Note 
?> 


在 浏览 器 中 预览 ， 填 写 表单 ， 然 后 提交 ， 则 显示 效果 如 图 17.2 所 示 。 


Email=zhangsan@163com 
网 址 =httpywwmysitecry 
姓名 = 女 


图 17.2 表单 信息 处 理 
175 在 线 练 习 


PHP 处 理 字符 串 的 能 力 非常 强大 , 方法 也 是 多 种 多 样 , 但 有 时 需要 选择 一 种 最 简单 且 理 想 的 解决 
方法 。 本 章 介绍 了 PHP 常用 的 字符 串 处 理 方法 。 当 然 ， 对 于 初学 者 来 说 ， 这 仅仅 是 一 个 开始 。 因 此 ， | 
同学 们 应 该 加 强 对 字符 串 处 理 能 力 的 训练 ， 感 兴趣 的 同学 可 扫 码 练习 。 | 
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正则 表达 式 


正则 表达 式 是 PHP 中 一 个 非常 重要 的 知识 点 ， 通 常用 来 查找 和 替换 字符 串 ， 最 常用 的 
就 是 验证 用 户 答 入 的 信息 是 否 正确 ， 如 电子 邮件 地 址 、 电 话 号 码 等 。 正则 表达 式 的 功能 非常 
强大 ， 热 练 掌 担 正则 表达 式 的 应 用 ,能 够 帮助 用 户 提高 字符 串 处 理 的 效率 ,编写 出 更 加 简练 


的 PHP 代码 ， 


【 学 习 重 点 】 


| 


至 吾 吾 


了 解 正则 表达 式 的 相关 概念 

事 担 正则 表达 式 的 基本 语言 

灵活 使 用 PHP 中 的 PCRE 函数 
能 金 应 用 正则 表达 式 解决 实际 问题 
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18.1 认识 正则 表达 式 


正则 表达 式 又 称 规则 表达 式 (Regular Expression)， 在 代码 中 常 简写 为 regex、regexp 或 RE， 党 | 
被 用 来 检索 、 蔡 换 那些 符合 某 个 模式 〈 规 则 ) 的 文本 。 现 代 计算 机 编程 语言 都 支持 利用 正则 表达 式 进 
行 字符 串 操作 。 

实际 上 ， 正 则 表达 式 是 对 字符 串 进行 操作 的 一 种 逻辑 公式 ， 就 是 用 事先 定义 好 的 一 些 特定 字符 ， | 
以 及 这 些 特定 字符 的 组 合 ， 组 成 一 个 “规则 字符 串 ” 这 个 “规则 字符 串 ” 用 来 表达 对 字符 串 的 一 种 ， 
过 滤 逻 辑 。 | 

给 定 一 个 正则 表达 式 和 一 个 被 操作 的 字符 串 ， 可 以 达到 如 下 目的 。 

加 ”被 操作 的 字符 串 是 否 符合 正则 表达 式 的 过 滤 逻 辑 (匹配 )。 

回 ”通过 正则 表达 式 ， 从 被 操作 字符 串 中 获取 想 要 的 特定 部 分 内 容 。 

PHP 支持 两 种 风格 的 正则 表达 式 语法 :POSIX 和 Perl。 这 两 种 风格 的 正则 表达 式 是 PHP 编译 时 | 
的 默认 风格 。 在 PHP 5.3 版 本 中 ，Perl 风格 不 能 被 禁用 。 访 问 http://www.php.net/pcre 可 以 了 解 更 多 关 ， 
于 PCRE 的 内 容 。 | 

下 面 先 了 解 与 正则 表达 式 相 关 的 几 个 技术 。 

回 grep: 是 一 种 强大 的 文本 搜索 工具 ， 它 能 使 用 特定 模式 匹配 (包括 正则 表达 式 〉 搜索 文本 

并 默认 输出 匹配 行 。 | 

回 egrep: grep 更 新 的 速度 无 法 与 技术 更 新 的 速度 同步 。 为 此 ， 贝 尔 实验 室 推出 了 egrep， 即 扩 | 

展 的 grep， 这 大 大 增强 了 正则 表达 式 的 能 力 。 | 

回 POSIX: 在 grep 发 展 的 同时 ， 其 他 一 些 开发 人 员 也 根据 自己 的 喜好 开发 出 了 具有 独特 风格 | 
的 版 本 。 但 问题 也 随 之 而 来 ， 有 的 程序 支持 某 个 元 字符 ， 而 有 的 程序 则 不 支持 ， 因 此 就 有 了 
POSIX。POSIX 是 一 系列 标准 ， 确 保 了 操作 系统 之 间 的 可 移植 性 。 但 POSIX 和 SQL 一 样 没 | 
有 成 为 最 终 的 标准 ， 而 只 能 作为 一 个 参考 。 

Perl: 1987 年 ，Larry Wall 发 布 了 Perl 编程 语言 ， 它 汲取 了 多 种 语言 精华 ， 并 内 部 集成 了 正 | 
则 表达 式 的 功能 ， 以 及 巨大 的 第 三 方 代码 库 CPAN。Perl 经 历 了 从 Perl 1 到 现在 的 Perl 6 的 | 
发 展 ， 最 终 成 为 POSIX 之 后 的 另 一 个 标准 。 | 
PCRE: 1997 年 ， Philip Hazel 开发 了 PCRE 库 ， 它 是 能 够 兼容 Perl 正则 表达 式 的 一 套 正则 引 | 

擎 ， 其 他 开发 人 员 可 以 将 PCRE 整合 到 自己 的 语言 中 ， 为 用 户 提供 丰富 的 正则 功能 。PHP | 

默认 支持 PCRE 库 。 | 


加 


18.2 ”正则 表达 式 基本 语法 


一 个 完整 的 正则 表达 式 由 两 部 分 构成 元 字符 和 普通 字符 。 元 字符 就 是 具有 特殊 含义 的 字符 , 如 | 
“.” 和 “9?”。 普 通 字符 就 是 仅 指 代 自 身 语义 的 普通 文本 ， 如 数字 、 字 母 等 。 一 般 情况 下 ， 正 则 表达 | 
式 都 被 放 在 定 界 符 中 ， 如 “/”， 避免 与 其 他 字符 串 混淆 。 


18.2.1 行 定 界 符 
行 定 界 符 描述 一 行 字符 串 的 边界 ， 具 体 说 明 如 下 。 


Ds 


| 2 ~ 人 网 设计 与 网 站 建设 从 入 门 到 精通 ( 微 课 精 编 版 ) 
| 回 ^: 表示 行 的 开始 。 
| 加 $: 表示 行 的 结尾 。 
| 【示例 】 下 面 示例 定义 一 个 被 操作 字符 串 "html、htm"， 一 个 正则 表达 式 '/^htm/"'， 然 后 调 
会 内 | preg_match() 函 数 执行 匹配 ， 匹 配 结果 存储 于 $matches 变量 中 ， 最 后 输出 显示 匹配 结果 及 其 所 在 


位 置 。 
$subject = "html、htm"; 
| $pattem = htm/ 


| Ppreg_match($pattern, $subject, Smatches, PREG OFFSET CAPTURE); 
| print_r($matches); 


| 输出 结果 如 下 。 
Aray ( 
[0]=>Amray( ”/ 第 一 个 匹配 
[0] => htm ”// 匹配 结果 
[二 0 ”/W 偏 移 位 置 
1 
| 上 面 示例 将 匹配 到 字符 串 中 行 开 始 位 置 的 “htm” 字 符 串 。 如 果 使 用 下 面 正则 表达 式 ， 则 可 以 匹 
| 配 结尾 的 “htm” 字 符 串 。 
| S$pattern = '/htm$/'; 


| 有 关 preg_match0) 函 数 的 用 法 请 参考 下 面 章节 内 容 。 
18.2.2 单词 定 界 符 


单词 定 界 符 描 述 一 个 单词 的 边界 ， 具 体 说 明 如 下 。 
加 ”\b: 表示 单词 边界 。 
回 \B: 表示 非 单词 边界 。 
【示例 】 下 面 示例 使 用 \b 定 界 符 匹配 一 个 完整 的 htm 单词 。 
S$subject = "html、htm"; 
S$pattern = 'N\bhtm\b/"'; 
Preg_match($pattern, $subject, $matches, PREG_OFFSET CAPTURE); 
Print_r($matches); 


| 输出 结果 如 下 。 
Aray ([0] => Aray ([0] => htm [1] =>7)) 


18.2.3 字符 类 


字符 类 就 是 一 个 字符 列表 ,可 以 使 用 字符 类 指定 字符 列表 以 匹配 正则 表达 式 中 的 一 个 位 置 。 使 用 
方 括号 ([ 和 ]) 定义 字符 类 。 
【示例 】 下 面 正则 表达 式 定义 了 匹配 html、HTML、Html、hTmL 或 HTml 的 字符 类 。 


S$pattem = v[hHIItT]IImM]DL] 
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容 提示 : POSIX 和 PCRE 都 使 用 了 一 些 预 定义 字符 类 ， 但 表示 方法 咯 有 不 同 ，POSIX 风格 的 预定 


义 字符 类 如 表 18.1 所 示 。 | 
表 18.1 预定 义 字符 类 列表 | 一 

预定 义 字符 类 说 明 | 攻克 

'[:digit:] 匹配 任何 十 进 制 数字 ， 等 同 于 [0-9] Note 

'[:xdigit:] 匹配 任何 十 六 进 制 数 字 | 

lower] 匹配 所 有 小 写字 母 ， 等 同 于 [a-z] 

'‘[:upper:]' 匹配 任何 大 写字 母 ， 等 同 于 [A-2] 

:alpha:y' 匹配 字母 。 等 同 于 [a-zA-Z]， 或 者 '[:lower:] 和 '[:upper:] 

:alnum:] 匹配 字母 或 数字 。 等 同 于 [a-zA-Z0-9]， 或 者 '[:alpha:]' 和 '[:digit:]' 

:blank:]' 匹配 空格 和 制 表 符 

'[:space:]' 匹配 空白 符 ， 如 空格 、 换 行 符 、 换 页 符 、 回 车 符 、 水 平 制 表 符 

(punet]' 匹配 任何 标点 符号 。 包 括 键 盘 上 的 所 有 特殊 字符 ， 如 !@#S? 等 

:print:]' 匹配 所 有 的 可 打印 字符 ， 包 括 空白 字符 

'[:graph:]' 匹配 所 有 的 可 打印 字符 ， 不 包括 空白 字符 

:cntrl:]' 匹配 控制 字符 


PCRE 的 预定 义 字符 类 则 使 用 反 斜 线 来 表示 ， 反 昏 线 的 用 法 请 参考 下 面 小 节 内 容 。 
18.2.4 选择 符 


选择 符 类 似 字符 类 ， 可 以 实现 选择 字符 的 匹配 模式 。 使 用 “|” 可 以 定义 选择 匹配 模式 ， 类 似 PHP 
运算 中 的 逻辑 或 。 | 
【示例 】 下 面 字 符 模式 可 以 匹配 html， 也 可 以 匹配 Html。 


S$pattern = "/h|lHtml/'; | 
交 提 示 : 字符 类 一 次 只 能 匹配 一 个 字符 ， 而 选择 符 “|” 一 次 可 以 匹配 任意 长 度 的 字符 。 在 子 表达 
式 中 ， 我 们 会 举例 说 明 。 | 

18.2.5 范围 符 


使 用 字符 关 需 要 列举 所 有 可 选 字符 ， 当 可 选 字符 比较 多 时 就 比较 麻烦 。 不 过 在 字符 关中 可 以 使 用 | 加 
连 字符 “-” 定 义 字符 范 转 


连 字符 左 侧 字符 为 范围 起 始点 ， 右 侧 字符 为 范围 终 目 点。 注意， 字符 范围 都 是 根据 字符 编码 表 的 
位 置 关系 来 确定 的 。 

【示例 】 下 面 示例 定义 多 个 字符 类 ， 匹 配 任意 指定 范围 的 字符 。 | 
S$pattern = "/[a-z]/'; / 匹配 任 一 个 小 写字 母 | 
Spattern = "人 [A-Z]/: / 匹配 任 一 个 大 写字 母 | 
S$pattern = "/[0-9]/'; / 匹配 任 一 个 数字 | 
S$pattern = V[vu4e00-wu9fas]/: / 匹配 中 文字 符 | 
Spatter = /[\x00-\xff]/'; // 匹配 单字 节 字 符 | 
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18.2.6 ”排除 符 


在 字符 类 中 ， 除 了 范围 符 外 ， 还 有 一 个 元 字符 : 排除 符 (^)。 将 “^” 放 到 方 括号 内 最 左 侧 ， 表 
侠 】 。 示 排 除 字符 列表 ， 也 就 是 将 反 转 该 集合 的 意义 。 类 似 PHP 运算 中 的 逻辑 非 。 
4 【示例 】 下 面 示例 定义 多 个 排除 字符 类 ， 匹 配 指定 范围 外 的 字符 。 
Spattern = /[^0-9]/: / 匹配 任 一 个 数字 
Spattern = /[^\x00-\xfF]/’; // 匹配 双 字 节 字符 


18.2.7 限定 符 


| 限定 符 用 来 指定 正则 表达 式 的 一 个 给 定 字符 、 字 符 类 或 子 表达 式 必 须要 出 现 多 少 次 才能 满足 匹 
| 配 。 有 具体 说 明 如 表 18.2 所 示 。 


表 18.2 限定 符 列表 
限 定 符 说 明 
by 匹配 前 面 的 字符 或 子 表达 式 0 次 或 多 次 。 例 如 ，zo* 能 匹配 z， 以 及 zoo。 等 价 于 {0,} 

匹配 前 面 的 字符 或 子 表达 式 一 次 或 多 次 。 例 如 ，zo+ 能 匹配 zo， 以 及 zoo， 但 不 能 匹配 z。 等 价 

于 {1,} 

? 匹配 前 面 的 字符 或 子 表达 式 0 次 或 一 次 .例如 ,do(es)? 可 以 匹配 do 或 does 中 的 do。 等 价 于 {0.1} 

n n 是 非 负 整数 。 匹 配 确定 的 n 次 。 例 如 ，o{2} 不 能 匹配 Bob 中 的 o， 但 是 能 匹配 food 中 的 两 个 o 

n, n 是 非 负 整数 。 至 少 匹 配 n 次 。 例 如 ，o{2,} 不 能 匹配 Bob 中 的 o， 但 能 匹配 foooood 中 的 所 有 o 
mm 和 n 均 为 非 负 整数 ,其 中 n<=m。 最 少 匹 配 n 次 , 且 最 多 匹配 m 次 .例如 ,of{1,3} 将 匹配 fooooood 

名 中 的 前 三 个 o。 注 意 ， 在 到 号 和 两 个 数 之 间 不 能 有 空格 


【示例 1】 下 面 示例 使 用 限定 符 匹配 字符 串 "gooooooogle" 中 前 面 4 个 字符 o。 


S$subject = "gooooooogle'": 

S$pattern = "/o{1,4}/"; 

Preg_match($pattern, $subject, $matches, PREG_OFFSET_CAPTURE); 
Print_r($matches); 


输出 结果 如 下 。 


Aray ( 
[0] => Array ( 
[0] => oooo 
[之 1 
Wn 
| 除了 各 } 外 ， 所 有 限定 符 都 有 具有 贪 禁 性 ， 因 为 它们 会 尽 可 能 多 地 匹配 字符 ， 只 有 在 它们 的 后 面 加 
| 上 一 个 “?”， 才 可 以 实现 非 贪 禁 或 最 小 匹配 。 
【示例 2】 以 示例 1 为 基础 ， 在 字符 模式 中 为 {1,4} 限 定 符 补 加 一 个 “?” 后 级， 定义 该 限定 符 为 
| 非 贪 禁 匹 配 ， 则 最 后 仅 匹 配 字符 串 "gooooooogle" 中 前 面 一 个 字符 o。 


| $subject = "gooooooogle": 
| S$pattern = "/o{1,4}2/"; 


s。 354 。 


第 18 章 正则 表达 式 | | 
Zs | 


preg_match($pattern, $subject, $matches, PREG OFFSET CAPTURE): | 
Print r($matches): | 


输出 结果 如 下 。 | 
Anay( 轩 全 内 
[0] => Array ( | v 
[0 一 。 Note 
则 全 二 | 
)) 


18.2.8 任意 字符 

点 号 〈.) 能 够 匹配 除 换行 符 之 外 的 任何 单字 符 。 如 果 要 匹配 点 号 〈.) 自己， 需要 使 用 “\” | i 
进行 转 义 。 | 

【示例 】 下 面 示例 使 用 点 号 元 字符 匹配 字符 串 "gooooooogle" 中 前 面 6 个 字符 。 | 


$subject = "gooooooogle"'; 

Spattern ="/.{1,6}/; 

Preg_match($pattern, $subject, $matches, PREG OFFSET CAPTURE); 
Print_r($matches); 


输出 结果 如 下 。 
Aray ([0] => Amay ( [0] => goooo00 [1] =>0)) 


18.2.9 转 义 字符 
转 义 字符 (\) 能 够 将 特殊 字符 变 为 普通 的 字符 ， 如 .、*、^、$ 等 ， 其 功能 与 PHP 字符 串 中 的 转 | 视频 讲解 
义 字 符 类 似 。 | 
【示例 】 下 面 示例 为 了 匹配 人 P 地 址 ， 使 用 转 义 字符 “\” 把 元 字符 〈.) 进行 转 义 ， 然 后 配合 限定 
符 匹 配 下 字符 串 。 


$subject= "127.0.0.1"; 

Spattern = "/([0-9]{1,3}\.7){4}/; 

preg_match($pattern, $subject, $matches, PREG_ OFFSET_ CAPTURE); 
Print_r($matches); 


Array( [0] => Amray([0] => 127.0.0.1 [1] =>0)[1]=> Armay ([0] =>1[1] = 8)) 

在 上 面 示例 中 ， 如 果 不 使 用 转 义 字符 ， 则 点 号 (.) 将 匹配 所 有 字符 。 
18.2.10” 反 和 斜 杠 

反 斜 本 字符 “\” 除 了 能 够 转 义 之 外 ， 还 具有 其 他 功能 ， 有 具体 说 明 如 下 。 

1. 定义 非 打印 字符 

具体 说 明 如 表 18.3 所 示 。 


视频 讲解 
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时 


SI 
表 18.3 非 打印 字符 列表 
非 打印 字符 说 明 
人 匹配 由 x 指明 的 控制 字符 。 例如 , \eM 匹配 一 个 Control-M 或 回 车 符 。x 的 值 必须 为 A-Z 或 az 
| 之 一 。 否 则 ， 将 e 视 为 一 个 原 义 的 'c 字 符 
¥ 匹配 一 个 换 页 符 。 等 价 于 \x0c 和 \eL 
un 匹配 一 个 换行 符 。 等 价 于 \x0a 和 \cJ 
Yr 匹配 一 个 回 车 符 。 等 价 于 \x0d 和 \eM 
Ys 匹配 任何 空白 字符 ， 包 括 空 格 、 制 表 符 、 换 页 符 等 。 等 价 于 [ mntw] 
\S 匹配 任何 非 空白 字符 。 等 价 于 [^ \fnwtv] 
\t 匹配 一 个 制 表 符 。 等 价 于 xw09 和 \cI 
VV 匹配 一 个 垂直 制 表 符 。 等 价 于 \xOb 和 \cK 


2. 预定 义 字符 集 
具体 说 明 如 表 18.4 所 示 。 
表 18.4 ”预定 义 字符 集 列表 


预定 义 字符 说 了 明 
\d 匹配 一 个 数字 字符 。 等 价 于 [0-9] 
VD 匹配 一 个 非 数字 字符 。 等 价 于 [^0-9] 
\s 匹配 任何 空白 字符 ， 包 括 空格 、 制 表 符 、 换 页 符 等 。 等 价 于 [ \fnu\tiw] 
\S 匹配 任何 非 空白 字符 。 等 价 于 [^ \fmwtw] 
VW 匹配 包括 下 画 线 的 任何 单词 字符 。 等 价 于 [A-Za-z0-9 ] 
\VW 匹配 任何 非 单词 字符 。 等 价 于 [^A-Za-z0-9 ] 


3. 定义 断言 的 限定 符 
有 具体 说 明 如 表 18.5 所 示 。 
表 18.5 定义 断言 的 限定 符 列表 


断言 限定 符 说 明 
\b 单词 定 界 符 
\B | 非 单词 定 界 符 
Ww | 字符 串 开头 ， 类 似 ^， 但 不 受 处 理 多 行 选项 的 影响 
wz | 字符 串 结尾 或 行 尾 换 行 符 之 前 的 位 置 )， 不 受 处 理 多 行 选项 的 影响 
ww | 字符 串 结尾 ， 类 似 $， 不 受 处 理 多 行 选项 的 影响 
\G 当前 搜索 的 开头 (起 始 位 置 ) 


18.2.11 ”小 括号 
在 正则 表达 式 中， 小 括号 字符 有 两 个 作用 ， 简 单 说 明 如 下 。 


1. 改变 作用 范围 
【示例 】 下 面 示例 显示 了 小 括号 在 改变 选择 符 和 限定 符 的 作用 范 


Em 
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Spattem = VhtmDI(HTMLJA 
Spattern = /(goo){1.3}/: 


在 上 面 代码 中 ， 第 一 行 正 则 表达 式 定义 选择 符 为 两 个 单词 ， 而 不 是 简单 的 一 个 字符 ; 第 二 行 正则 | 


表达 式 定义 限定 符 限定 的 是 3 个 字符 ， 而 不 仅仅 是 其 前 面 的 一 个 字符 。 
2.， 定义 子 表达 式 


小 括号 的 第 二 个 作用 就 是 分 组 ， 即 定义 子 表达 式 ， 子 表达 式 相 当 于 一 个 独立 的 正则 表达 式 ， 后 面 1 
要 学 到 的 反 向 引用 与 子 表达 式 有 直接 的 关系 。 子 表达 式 具有 记忆 功能 ， 能 够 临时 存储 其 匹配 的 字符 ， | 


然后 可 以 在 后 面 进行 引用 。 
18.2.12 反 向 引用 
反 向 引用 就 是 根据 子 表达 式 的 “记忆 ”功能 来 匹配 连续 出 现 的 字符 或 子 字符 串 。 


对 于 一 个 正则 表达 式 来 说, 如 果 在 其 中 遇 到 小 括号 , 将 导致 小 括号 内 的 匹配 字符 被 存储 到 一 个 临 | 
时 缓冲 区 中 , 所 捕获 的 每 个 子 匹配 都 按照 在 正则 表达 式 模式 中 从 左 至 右 所 遇 到 的 内 容 存储 。 存 储 子 匹 | 


配 的 缓冲 区 编号 从 1 开始 ， 连 续 编 号 直至 最 大 99 个 子 表达 式 。 
每 个 缓冲 区 都 可 以 使 用 An 访问， 其 中 为 一 个 标识 特定 缓冲 区 的 一 位 或 两 位 十 进 制 数 。 
【示例 】 下 面 示例 定义 一 串 字 符 ， 然 后 使 用 [ab])N1/ 匹 配 两 个 重复 的 字母 a 或 b。 


$subject = "abcdebbcde"; 

Spattern = /([ab])\1/"; 

Preg_match($pattern, $subject, $matches, PREG_ OFFSET CAPTURE); 
Print_r($matches); 


输出 结果 如 下 。 


Array ( 
[0] =>Array ( ”// 匹配 的 结果 和 位 置 
[0] ==bb 
[1]=>5 


) 
[1] =>Amay ( 。 / 子 表达 式 匹配 的 结果 和 位 置 
[0] =>b 
回 之 3 
) 
) 


的 字符 ， 在 这 里 也 就 是 aa 或 者 bb 才能 匹配 成 功 。 
18.2.13 ”模式 修饰 符 


己 的 模式 设置 ， PHP 中 的 主要 模式 修饰 符 说 明 如 表 18.6 所 示 。 
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对 于 正则 表达 式 “(ab])N1"， 子 表达 式 [ab] 虽 然 可 以 匹配 a 或 者 b， 但 是 捕获 组 一 旦 匹配 成 功 , 反 | 
向 引用 的 内 容 也 就 确定 。 如 果 捕获 组 匹配 到 a， 那 么 反 向 引用 也 就 只 能 匹配 a， 同 理 ， 如 果 捕 获 组 匹 | 
配 到 的 是 b， 那 么 反 向 引用 也 就 只 能 匹配 b。 由 于 后 面 反 向 引用 “\1” 的 限制 ， 要 求 必须 是 两 个 相同 | 


模式 修饰 符 也 称 为 模式 修正 符 , 在 正则 表达 式 的 定 界 符 之 外 使 用 。 主 要 用 米 调 整 正则 表达 式 的 解 四 ee 吕 
释 ， 扩 展 正则 表达 式 在 匹配 、 蔡 换 等 操作 时 某 些 功能 ， 增 强 了 正则 表达 式 的 能 力 。 不 同 的 语言 都 有 自 | 


全 ” 


Note 
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表 18.6 ”正则 表达 式 的 修饰 符 
| 修饰 符 说 明 
| i 匹配 字符 时 不 区 分 大 小 写 
会 内 | 将 字符 串 视 为 多 行 。 在 默认 情况 下 ， 正 则 表达 式 的 元 字符 ^ 和 9 将 目标 字符 串 作为 单一 的 一 行 字 
”| m 符 〈 甚 至 其 中 包括 换行 符 也 是 如 此 )。 如 果 在 修饰 符 中 加 上 m， 那 么 开始 点 和 结束 点 将 会 指向 
Note 字符 串 的 每 一 行 的 开头 和 结束 ， 也 就 是 ^ 和 $ 将 匹配 每 一 行 的 开始 和 结束 点 


| s 将 字符 串 视 为 一 行 ， 包 括 换行 符 ， 换 行 符 被 视 为 普通 的 字符 

x 忽略 空白 ， 除 非 进行 转 义 的 空白 不 被 忽略 

| 只 用 在 preg_replace(0) 函 数 中 , 在 蔡 换 字符 串 中 北向 引用 做 正常 的 替换 , 将 其 ( 即 “ 蔡 换 字符 串 ”) 
| 作为 PHP 代码 求 值 ， 并 用 其 结果 来 蔡 换 所 搜索 的 字符 串 

A 匹配 字符 串 中 的 开头 部 分 

如 果 设 置 该 修饰 符 ， 模 式 中 的 $ 元 字符 仅 匹 配 目标 字符 串 的 结尾 。 没 有 此 选项 时 ， 如 果 最 后 一 
D 个 字符 是 换行 符 的 话 ， 美 元 符号 也 会 匹配 此 字符 之 前 但 不 会 匹配 任何 其 他 换行 符 之 前 )。 如 
果 设 定 了 m 修饰 符 则 忽略 此 选项 

与 mm 相反， 如 果 使 用 该 修饰 符 ， 那 么 9 将 匹配 绝对 字符 串 的 结尾 ， 而 不 是 换行 符 前 面 ， 默 认 打 
开 该 模式 

U 焦 禁 模式 ， 与 元 字符 ?的 作用 类 似 ， 最 大 限度 的 匹配 就 是 贪 禁 模 式 


| 模式 修饰 符 既 可 以 写 在 正则 表达 式 的 外 面 ， 也 可 以 写 在 表达 式 内 。 例 如 ， 如 果 忽略 大 小 写 模式 ， 
| 可 以 写 为 /htmli、V2ihtml(?-00 和 VC2i:)html/' 3 种 格式 。 


下 


18.3 使 用 PCRE 扩展 正则 表达 式 函 数 


”正则 表达 式 不 能 独立 使 用 , 它 只 是 一 种 用 来 定义 字符 串 的 规则 模式 , 必须 在 相应 的 正则 表达 式 函 
| 数 中 应 用 ， 才 能 实现 对 字符 串 的 匹配 、 查 找 、 蔡 换 及 分 割 等 操作 。 在 PHP 中 有 两 套 正则 表达 式 的 函 
| 数 库 ,而 使 用 与 Perl 兼容 的 正则 表达 式 函数 库 的 执行 效率 要 略 占 优势 ,所 以 在 本 章 中 主要 介绍 以 preg_ 
”开头 的 PCRE 扩展 函数 。 


18.3.1 数组 过 滤 


preg_grepO 函 数 能 够 使 用 正则 表达 式 过 滤 数组 中 的 元 素 ， 具 体 用 法 如 下 所 示 。 

| anmay preg_grep( string Spattem , array Sinput [, int Sflags =0 ] ) 

| 参数 说 明 如 下 。 

pattern: 要 搜索 的 模式 ， 字 符 串 形式 。 

input: 输入 数组 。 

flags: 如 果 设 置 为 PREG GREP INVERT， 将 返回 输入 数组 中 与 给 定 模式 pattern 不 匹配 的 
| 元 素 组 成 的 数组 。 

”函数 将 返回 给 定数 组 input 中 与 模式 pattem 相 匹配 的 元 素 组 成 的 数组 。 返 回 数组 将 使 用 input 参 
| 数 数组 中 key 做 索引 。 

| 【示例 】 下 面 示例 使 用 preg_grepO 函 数 过 滤 出 数组 中 所 有 的 浮 点 数 。 


图 图 回 
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Sarray = array(2,3,45,"a",4.5,8.7); 
S$pattern = "/^(\d+)?\\d+$/"; 

/ 返回 所 有 包含 浮 点 数 的 元 素 

$f] array = preg grep(Spattern, Sarray): 


print 1(Sfl amay ); | 用 
输出 结果 如 下 。 一 
lL . Note 
Array | 
[=>45 
[5]=>8.7 
) 


18.3.2 执行 一 次 匹配 


preg_match0 函 数 能 够 执行 一 个 正则 表达 式 匹配 ， 具 体 用 法 如 下 所 示 。 
int preg_match( string $pattern , string $subject [, array &S$matches [, int $flags = 0 [, int $offset = 0 ]]] ) 
参数 说 明 如 下 。 
加 ”pattem: 要 搜索 的 模式 ， 字 符 串 类 型 。 
回 subject: 输入 字符 串 。 | 
回 “matches; 如 果 提供 了 参数 matches， 它 将 被 填充 为 搜索 结果 。 其 中 ，$matches[0] 将 包含 完整 
模式 匹配 到 的 文本 ，$matches[1] 将 包含 第 一 个 捕获 子 组 匹配 到 的 文本 ， 以 此 类 推 。 | 
加 ”flags: 可 以 被 设置 为 PREG_OFFSET_CAPTURE 标记 值 ， 表 示 对 于 每 一 个 匹配 返回 时 ， 都， 
会 附加 字符 串 偏 移 量 。 注 意 ， 这 会 改变 填充 到 matches 参数 的 数组 ， 使 其 每 个 元 素 成 为 一 个 | 
数组 ,数组 的 第 0 个 元 素 是 匹配 到 的 字符 串 ,第 1 个 元 素 是 该 匹配 字符 串 在 目标 字符 串 subject | 
中 的 偏 移 量 。 
回 offset， 可 选 参数 ， 用 于 指定 从 目标 字符 串 的 某 个 位 置 开 始 搜索 ， 单 位 是 字 节 。 默 认 情况 下 ，， 
搜索 从 目标 字符 串 的 开始 位 置 开 始 。 | 
preg_match0 函 数 将 返回 pattemn 的 匹配 次 数 。 返 回 值 将 是 0 次 (不 匹配 ) 或 1 次 , 因为 preg_matchO | 
函数 在 第 一 次 匹配 后 将 会 停止 搜索 。 如 果 发 生 错 误 ，preg_match0 函 数 返 回 false。 
【示例 1】 下 面 示例 使 用 preg_match0 函 数 快速 检测 给 定 字符 串 中 是 否 包 含 phpp， 匹 配 字符 不 区 
分 大 小 写 。 
S$subject = "PHP is a popular general-purpose scripting language that is especially suited to web development."; 
S$pattern = "/php/i"; 
echo preg_match($pattern, $subject); 
输出 结果 如 下 。 
4 


【示例 2】 下面 示例 使 用 preg_match0 函 数 从 URL 字符 串 中 匹配 出 域名 子 串 。 


Ssubject = "http://www.php.net/index.html"; 
S$pattern = (2:http:VV)2(IAV]+H) 

/ 从 URL 中 获取 主机 名 称 
preg_match($pattern, $subject, $matches); 
$subject = $matches[1]; 
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Spattem = [~.]+\ [J+S/; 
/ 获取 主机 名 称 的 后 面 两 部 分 
preg_match($pattern, $subject, $matches); 
echo "域名 : {Smatches[0]}\n"; 


全- 。 输出 结果 如 下 。 
Note 域名 : php.net 

【示例 3】 下 面 示例 使 用 preg_match0 函 数 ， 命 名 子 组 。 

| Ssubject = "abcde:12345"; 
S$pattern = "/(?P<first>\w+):(?P<second>\d+)/'; 
Ppreg_match($pattern, $subject, $matches); 
Print_r($matches); 
输出 结果 如 下 。 


Array ( 
[0] => abcde:12345 
[first] => abcde 
[1] => abcde 
[second] => 12345 
[2] => 12345 

) 


肉 提示 : 如 果 仅 想 要 检查 一 个 字符 囊 是 否 包含 另外 一 个 字符 囊 ， 不 要 使 用 Preg_match0 函 数 ， 建 议 
| 使 用 strpos 〇 或 strstrO 函 数 会 更 快 。 


18.3.3 执行 所 有 匹配 


preg_match_all0 函 数 能 够 执行 一 个 全 局 正则 表达 式 匹 配 ， 具 体 用 法 如 下 所 示 。 

int preg_match all( string $pattern , string $subject [, array &$matches [, int $flags = PREG_ PATTERN _ORDER [， 

int $offset = 0]]]) 

参数 说 明 如 下 。 

pattermm: 要 搜索 的 模式 ， 字 符 串 形式 。 

subject: 输入 字符 串 。 

matches: 多 维 数组 ， 作 为 输出 参数 ， 输 出 所 有 匹配 结果 ， 数 组 排序 通过 flags 指定 。 

| flags: 可 选 参数 ， 可 以 结合 下 面 标记 使 用 。 如 果 没 有 给 定 排序 标记 ， 默 认为 PREG PATTERN 

| ORDER 。 

> PREG PATTERN ORDER: 结果 排序 为 $matches[0] 保 存 完整 模式 的 所 有 匹配 ， 
$matches[1] 保 存 第 一 个 子 组 的 所 有 匹配 ， 以 此 类 推 。 

> PREG SET_ORDER: 结果 排序 为 $matches[0] 包 含 第 一 次 匹配 得 到 的 所 有 匹配 (包含 子 
组 )，$matches[]] 是 包含 第 二 次 匹配 到 的 所 有 匹配 (包含 子 组 ) 的 数组 ， 以 此 类 推 。 

> PREG OFFSET_ CAPTURE: 如 果 设 置 该 标记 ， 每 个 发 现 的 匹配 返回 时 会 增加 它 相 对 目 
标 字符 串 的 偏 移 量 。 

offset: 可 选 参数 ， 用 于 从 目标 字符 串 中 指定 位 置 开 始 搜索 (单位 是 字 节 ) 。 查 找 时 从 目标 

字符 串 的 开始 位 置 开 始 。 


图 图 图 回 


加 
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preg_match all0 函 数 能 够 搜索 subject 中 所 有 匹配 pattern 给 定 正则 表达 式 的 匹配 结果 ， 并 且 将 它 
们 以 flag 指定 顺序 输出 到 matches 中 。 在 第 一 个 匹配 找到 后 , 子 序列 继续 从 最 后 一 次 匹配 位 置 搜索 。 | 
【示例 】 下 面 示例 使 用 preg_match_all0 函 数 找 出 HIML 字符 串 中 所 有 标签 及 其 包含 的 文本 等 ， 


信 息 o | 
/2 是 一 个 后 向 引用 的 示例 Woes 
// 这 会 告诉 pere 它 必须 匹配 正则 表达 式 中 第 二 个 圆 括号 (这 里 是 (Mw]+)) ‘Note 


/ 匹配 到 的 结果 。 这 里 使 用 两 个 反 斜 线 是 因为 这 里 使 用 了 双 引 号 | 
$html = "<b> 加 粗 文 本 </b><p> 段 落 文本 </p>"; | 
preg_mateh_ all("/(<([\w] [>]*>)(.*7)(<W\2>)/", Shtml, Smatches, PREG_SET_ORDER): | 
foreach ($matches as $val) { | 
echo "匹配 信息 : ". $val[0] . "m"; | 
echo " 子 组 1: " . Sval[1] . "\n"; | 
echo " 子 组 2: " . $val[2] . "\n"; 
echo " 子 组 3: " . $val[3] . "\n"; 
echo " 子 组 4: " . $val[4] . "mn"; 


} 

输出 结果 如 下 。 

匹配 信息 : <b> 加 粗 文本 </b> 
子 组 1: <b> 

子 组 2:b 


子 组 3: 加 粗 文本 
子 组 4: </b> 


匹配 信息 : <p> 段 落 文本 </p> 
子 组 1: <p> 

子 组 2:p 

子 组 3: 段落 文本 

子 组 4: </p> 


18.3.4” 转 义 字 符 


preg_quote() 函 数 能 够 转 义 正则 表达 式 字符 ， 具 体 用 法 如 下 所 示 。 
string preg_quote( string $str [, string $delimiter = NULL ] ) 
参数 说 明 如 下 。 
回 str: 输入 字符 审 。 
回 delimiter: 可 选 参数 ， 指 定 会 被 转 义 的 字符 。 通 常用 于 转 义 PCRE 函数 使 用 的 分 隔 符 , 如 <“/” | 
是 最 通用 的 分 隔 符 。 | 
Preg_quote0 函 数 在 str 中 每 个 正则 表达 式 语法 中 的 特殊 字符 前 增加 一 个 反 和 斜 线 , 如 .\+*?[^] | 
$(){}=!<>|:-。 | 
【示例 】 下 面 示例 使 用 preg_quote0 函 数 对 字符 串 进行 转 义 ， 避 免 引 发 歧义 。 | 
S$keywords = "2017/5/5 5.688'; 


Skeywords = preg_quote(Skeywords, '/): | 
echo $keywords; | 
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输出 结果 如 下 。 
2017V5V5 5\.68\S 


食 站 | 18.3.5 ”查找 替换 


preg_replace() 函 数 能 够 执行 一 个 正则 表达 式 的 搜索 和 蔡 换 ， 具 体 用 法 如 下 所 示 。 

mixed preg_replace( mixed $pattern , mixed S$replacement , mixed $subject [, int Slimit= -1 [, int &$count ]] ) 

参数 说 明 如 下 。 

回 patterm: 要 搜索 的 模式 。 可 以 是 一 个 字符 串 或 字符 串 数 组 。 

回 ”replacement: 用 于 替换 的 字符 串 或 字符 串 数 组 。 如 果 这 个 参数 是 一 个 字符 串 , 并 且 pattern 是 
一 个 数组 ,那么 所 有 的 模式 都 使 用 这 个 字符 串 进行 蔡 换 。 如 果 pattern 和 replacement 都 是 数 
组 ,每 个 pattem 使 用 replacement 中 对 应 的 元 素 进 行 蔡 换 。 如 果 replacement 中 的 元 素 比 pattem 
中 的 少 ， 多 出 来 的 pattem 使 用 空 字符 串 进行 蔡 换 。 


| 送 提 示 : replacement 中 可 以 包 售后 向 引用 Wn、Sn， 语 法 上 首选 后 者 。 每 个 这 样 的 引用 将 被 匹配 到 
的 第 nn 个 捕获 子 组 捕获 到 的 文本 替换 。 n 可 以 是 0-99，\0 和 $0 代表 完整 的 模式 匹配 文本 。 
捕获 子 组 的 序号 计数 方式 为 : 代表 捕获 子 组 的 左 括号 从 左 到 右 ， 从 1 开始 数 。 如 果 要 在 
replacement 中 使 用 反 和 针线， 必须 使 用 4 个 。 
回 ”subject， 要 进行 搜索 和 蔡 换 的 字符 串 或 字符 串 数组 。 
回 limit， 每 个 模式 在 每 个 subject 上 进行 蔡 换 的 最 大 次 数 。 默 认 是 -1 (无 限 ) 。 
回 “ count， 如 果 指 定 ， 将 会 被 填充 为 完成 的 蔡 换 次 数 。 
| 如 果 subject 是 一 个 数组 ，preg_replace0 函 数 返回 一 个 数组 ， 其 他 情况 下 返回 一 个 字符 串 。 如 果 
| 匹配 被 查找 到 ， 蔡 换 后 的 subject 被 返回 ， 其 他 情况 下 返回 没有 改变 的 subject。 如 果 发 生 错误 ， 返 回 
| NULL。 
【示例 】 下 面 示例 使 用 后 向 引用 修改 字符 串 中 的 数字 和 显示 格式 。 
$string ='April 15, 2017'; 
$pattem = VCw+) (\d+), (Md)/; 
Sreplacement = '$3-${1}-12'; 
echo preg_replace($pattern, $replacement, $string); 
输出 结果 如 下 。 
2017-April-12 
| 当 在 替换 模式 下 工作 并 且 后 向 引用 时 , 不 能 使 用 \1 这 样 的 语法 来 描述 后 向 引用 , 可 以 使 用 \${1}1， 
| 这 创建 了 一 个 独立 的 $1 后 向 引用 。 


18.3.6 ”高 级 查找 替换 


| preg_replace_callback0 〇 函数 能 够 执行 一 个 正则 表达 式 搜索 ， 并 且 使 用 一 个 回调 函数 进行 检 换 ， 具 
， 体 用 法 如 下 所 示 。 


| mixed preg replace callback( mixed Spattern , callable $callback , mixed $subject [, int $limit = -1 [, int 
| &sScount]) 
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参数 说 明 如 下 。 
回 ”pattem: 要 搜索 的 模式 ， 可 以 是 字符 串 或 一 个 字符 串 数组 。 | 
回 “callback: 一 个 回调 函数 ， 在 每 次 需要 替换 时 调用 ， 调 用 时 函数 得 到 的 参数 是 从 subject 中 匹 | 


配 到 的 结果 。 回 调 函数 返回 真正 参与 蔡 换 的 字符 串 。 好 
subject， 要 搜索 葵 换 的 目标 字符 串 或 字符 吊 数组 。 
limit 对 于 每 个 模式 用 于 每 个 subject 字符 串 的 最 大 可 葵 换 次 数 ， 默 认 是 -1 (无 限制 ) 。 
count: 如 果 指定 ， 这 个 变量 将 被 填充 为 换 执行 的 次 数 。 


如 果 subject 是 一 个 数组 ，preg_replace_callback0 函 数 将 返回 一 个 数组 ， 其 他 情况 返回 字符 串 。 错 
误 发 生 时 返回 NULL。 如 果 查 找到 了 匹配 ,返回 替换 后 的 目标 字符 串 ( 或 字符 串 数组 ), 其 他 情况 subject 
将 会 无 变化 返回 。 | 
【示例 】 下 面 示例 使 用 preg_ replace _callbackO 函 数 将 日 期 字符 串 中 的 年 份 数字 加 1。 
Spattem = ldtL2}AdftL2300d145D 
Stext = "5/15/2017"; 
// 回调 函数 
function next_year($matches){ 
// 通常 : Smatches[0] 是 完成 的 匹配 
// Smatches[1] 是 第 一 个 捕获 子 组 的 匹配 ， 以 此 类 推 
return $matches[1].($matches[2]+1); 


} 

echo preg replace_callback($pattern, "next_year", $text); 
输出 结果 如 下 。 

5/15/2018 


18.3.7 分隔 字 符 串 


preg_splitO 函 数 能 够 通过 一 个 正则 表达 式 分 隔 字符 串 ， 具 体 用 法 如 下 所 示 。 
array preg_split( string $pattern , string $subject [, int $limit = -1 [, int Sflags=0]]) 


参数 说 明 如 下 。 
pattem: 用 于 搜索 的 模式 ， 字 符 串 形式 。 
subject: 输入 字符 串 。 | 
limit， 如 果 指 定 ， 将 限制 分 隔 得 到 的 子 串 最 多 只 有 limit 个 ， 返 回 的 最 后 一 个 子 串 将 包含 所 | 
有 剩余 部 分 。limit 值 为 -1、0 或 null 时 ， 都 代表 不 限制 。 | 
回 flags: 可 以 是 任何 下 面 标记 的 组 合 ( 以 位 或 运算 符 | 组 合 )。 
> PREG SPLIT_NO_EMPTY: preg_split0 函 数 将 返回 分 隔 后 的 非 空 部 分 。 
> 了 PREG SPLIT DELIM CAPTURE: 用 于 分 隔 的 模式 中 的 括号 表达 式 将 被 捕获 并 返回 。 | 
> PREG SPLIT OFFSET_ CAPTURE: 对 于 每 一 个 出 现 的 匹配 返回 时 将 会 附加 字符 串 偏 移 量 。 ， 
preg_split0 函 数 将 返回 一 个 使 用 pattern 边界 分 隔 subject 后 得 到 的 子 串 组 成 的 数组 。 | 
【示例 】 下 面 示例 使 用 preg_splitO 函 数 将 一 个 短语 分 隔 为 多 个 单词 。 
Spattern = "/Ds,]+/"; 


Stext = "Hi how are you"; 
/ 使 用 逗号 或 空格 (包含 ""、w、\t、wm、Yf) 分 隔 词语 
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Skeywords = preg_split($pattern, $text ); 
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Print r(Skeywords); 
| 输出 结果 如 下 。 
优 | ” 
和 | [0] => Hi 
四 一 tv 
| 四 一 are 
| [3] => you 
) 


184 案例 实战 


| 在 PHP 中 ， 正 则 表达 式 应 用 最 多 的 场景 是 对 表单 提交 的 数据 进行 验证 ， 判 断 是 否 合理 、 合 法 。 
下面 结合 示例 进行 说 明 。 
铀 18.4.1 验证 电话 号 码 


在 用 户 注册 信息 时 ,往往 要 求 填写 座机 电话 号 码 , 而 座机 电话 号 码 是 由 11 位 或 12 位 数字 的 组 成 ， 
捐 贞 将 得 所 以 一 定 要 对 电话 号 码 的 位 数 和 格式 进行 限制 。 本 实例 通过 正则 表达 式 和 正则 表达 式 函数 preg_ 
。 match_all0 函 数 实现 对 电话 号 码 格式 的 验证 ， 运 行 结果 如 图 18.1 所 示 。 


De tS no//ocalho.. - So | locahost 
PHP 正 则 表达 式 验 证 PHP 正 则 表达 式 验 证 
输入 值 ，[01066668888 x 输入 值 ， [输入 电话 号 码 


验证 验证 
您 答 入 的 信息 非法 。 您 输入 的 信息 如 下 : 


010-66668888 


图 18.1 使 用 正则 表达 式 验证 电话 号 码 


【操作 步骤 】 
(1) 新 建 网 页 文档 ， 保 存 为 testLphp。 
| (2) 构建 一 个 简单 的 表单 结构 。 代 码 如 下 所 示 ， 设 置 <form> 标 签 的 method 属性 值 为 "post"， 提 交 的 
”服务 器 文件 为 自身 ， 通 过 PHP 脚本 动态 定义 :<?php echo htmlspecialchars($_SERVER["PHP_SELF"]):?>。 
| <h2>PHP 正则 表达 式 验证 </h2> 
<form method="post" action="<?php echo htmlspecialchars($_ SERVER["PHP SELF"]):?>"> 
输入 值 : 
<input type ="text" name ="text" value =" 输 入 电话 号 码 " onfocus ="this.value=""> 
<br><br 
<input type="submit" name="submit" value=" 验 证 "> 
</form> 
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设置 文本 框 的 name 属性 值 为 text, 默认 值 为 "输入 电话 号 码 ", 通过 onfocus ="this value=" 属 性 设 
置 当 文本 框 获取 焦点 时 ， 清 除 提示 文本 。 | 
(3) 输入 下 面 PHP 脚本 ， 实 现 对 提交 的 信息 进行 验证 。 | 


<?php 
// 定义 变量 并 设置 为 空 值 
$ext= Note 
1f($_SERVER["REQUEST METHOD"] 一 "POST") { | 

Stext = test_ input($_ POST["text"]); | 


if( Stext =" ){ 
echo "<h3> 您 输入 的 信息 如 下 : </h3>"; 
echo $text; 
jelse{ 
echo "<h3> 您 输入 的 信息 非法 。</h3>"; 
1 
} 
function test_input($data) { 
Sdata = trim($data); // 清除 首尾 空格 
$data = stripslashes($data); // 去 除 转 义 反 斜 线 
$data = htmlspecialchars($data); / 转 义 预定 义 HTML 字符 "<" 和 ">" 
这 preg_match_all(vGd{3}-)Cdf8))SICdf4}-)Cd{7)S.Sdata,Scounts)){ 
Teturn $data; 
jelse{f 
Teturn ""; 
} 
} 
?> 


在 上 面 PHP 脚本 中 ， 先 定义 一 个 变量 $text， 初 始 化 为 空 。 设 计 当 用 户 提交 表单 时 ， 接 收 用 户 提 

交 的 表单 信息 ， 然 后 声明 一 个 函数 test_inputO 处 理 用 户 输入 的 信息 。 该 自 定义 函数 对 信息 进行 简单 的 | 

处 理 ， 清 除 首尾 空白 ， 以 及 各 种 特殊 字符 ， 然 后 定义 如 下 正则 表达 式 。 | 
"0d{3}-)Qd{8})sI0d{4}-)0d07))3/" 


来 验证 输入 的 值 是 否 都 是 数字 ， 且 长 度 为 11， 格 式 为 nnn-nnnnnnnn 或 者 nnnn-nnnnnnn。 
最 后 ， 调 用 preg_match_all0 函 数 验 证 用 户 输入 的 所 有 信息 。 


18.4.2 验证 Email 地 址 


在 网 上 填写 信息 时 ， 一 般 都 需要 用 户 提供 Email 地 址 ， 无 论 申请 的 是 126 邮箱 ， 还 是 163 邮箱 ， | 
Email 地 址 的 格式 是 固定 的 。 本 实例 通过 preg_matchO 正 则 匹配 函数 和 正则 表达 式 验 证 Email 地 址 格 | 
式 是 否 正确 ， 运 行 结果 如 图 18.2 所 示 。 

【操作 步骤 】 
(1) 新 建 网 页 文档 ， 保 存 为 testl .php。 | 
(2) 构建 一 个 简单 的 表单 结构 。 代 码 如 下 所 示 ， 设 置 <form> 标 签 的 method 属性 值 为 "post"， 提 交 的 | 
服务 器 文件 为 自身 ， 通 过 PHP 脚本 动态 定义 : <?php echo htmlspecialchars($ SERVER["PHP SELF"]):?>。 | 
<h2>PHP 正则 表达 式 验证 <h2> 
<form method="post" action="<?php echo htmlspecialchars($_SERVERI"PHP_SELF"]):?>"> | 


| 
人 
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输入 电子 邮件 地 址 : <br> 
<input name ="text" type ="text" placeholder="xxxxxx(Oxxx.xx" onfocus ="this.value="" value =""> 
<br> 
<br> 
<input type="submit" name="submit" value=" 验 证 "> 
</form> 


i x 
四 -| 过 htp//ocaho.. - So¢ | @ localhod 四 -| 要 hp//ocalho.. - So | @ localhod 


PHP 正 则 表达 式 验 证 PHP 正 则 表达 式 验 证 
输入 电子 邮件 地 址 ， 输入 电子 拖 件 地 址 ， 


[oocoo@xooxxc [ecox@xoo 
LEN [下] 
您 输入 的 信息 非法 。 您 输入 的 信息 如 下 : 


zhangsan@163.com 


httpy/localhost/testT,php 
| 图 18.2 使 用 正则 表达 式 验证 Email 地 址 
| (3) 复制 18.4.1 节 示例 的 PHP 脚本 部 分 代码 。 修 改 验 证 函数 test_input0 的 代码 ， 具 体 代码 如 下 


| 所 示 。 
function test_input($data) { 
Sdata = trim($data); / 清除 首尾 空格 
Sdata = stripslashes($data); // 去 除 转 义 反 斜 线 
$data = htmlspecialchars($data); / 转 义 预定 义 HIML 字符 "<" 和 ">" 
if(preg_match("Aw+([-+.] w+)*@\Ww+t([-. wt)*\ w+(C-.] w+)*/",Sdata)){ 
Tetum $data; 
jelse{f 
Tetum "" 
} 


在 上 面 自 定义 函数 中 ， 使 用 preg_matchO 函 数 执行 一 次 正则 表达 式 ， 匹 配 用 户 输入 的 信息 是 否 符 
| 合 Email 格式， 其 中 正则 表达 式 如 下 。 


Aw+t([-+ wt)*@ wt J wt) wt wt)*/" 
| PHP 支持 两 种 正则 表达 式 函数 库 : 一 种 是 POSIX 扩展 ;另外 一 种 是 Perl 兼容 。 在 性 能 上 ，Perl 
| 兼容 正则 表达 式 速度 更 快 一 些 。 


18.4.3 验证 IP 地 址 


| JP 地 址 是 Web 用 户 可 以 访问 互联 网 的 身份 凭证 。 每 一 个 人 P 地 址 相对 其 他 用 户 的 下 都 是 独立 的 。 
， 本 实例 通过 正则 表达 式 函 数 preg_matchO0 和 正则 表达 式 对 他 地 址 进行 验证 ， 运 行 结 果 如 图 18.3 所 示 。 
| 【操作 步 又 】 

(1) 新 建 网 页 文档 ， 保 存 为 testl php。 
| (2) 构建 一 个 简单 的 表单 结构 。 代 码 如 下 所 示 ， 设 置 <form> 标 签 的 method 属性 值 为 "post"， 提 交 的 
| 服务 器 文件 为 自身 ， 通 过 PHP 脚本 动态 定义 : <?php echo htmlspecialchars($_SERVER["PHP SELF"]):?>。 
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<form method="post" action="<?php echo htmlspecialchars($_ SERVER["PHP_SELF"]):?>"> 
输入 下 地址 : <input name ="text" type ="text" placeholder="nnn nnn nnn nnn" onfocus ="this.value=" value ="> 
<br> 
<br> 
<input type="submit" name="submit" value=" 验 证 "> 

</form> 


©- weane. acjswr | 
PHP 正 则 表达 式 验 证 
输入 人 P 地 址 ，[169128.1 术 x 


验证 
您 输入 的 信息 如 下 : 


169.128.1.1 


图 18.3 使 用 正则 表达 式 验证 卫 地 址 
(3) 在 18.4.2 节 示例 基础 上 ， 重 新 定义 PHP 文本 验证 函数 test_ input0， 完 整 代码 如 下 所 示 。 | 
function test_input($data) { 


$data = trim($data); // 清除 首尾 空格 | 
Sdata = stripslashes($data); // 去 除 转 义 反 斜 线 | 
$data = htmlspecialchars(Sdata); /| 转 义 预定 义 HTML 字符 "<" 和 ">" | 
if(preg_match("Nd+\d+\d+\\d+/",Sdata)){ | 

return $data; | 
Jelse{ | 

Tetum ™" | 
} | 


Internet 为 每 一 个 主机 分 配 唯一 的 一 个 32 位 地 址 ， 该 地 址 称 为 P 地 址 ， 也 称 为 网 际 地 址 。 卫 地 | 
址 由 4 个 数组 成 ， 每 个 数 取 值 范围 为 0 一 255， 每 两 个 数 之 间 用 “.” 分 隔 。 所 以 瑟 地 址 的 格式 是 固定 | | 
的 ， 正 则 表达 式 "Ad+\d+\d+\vdt" 可 以 验证 所 有 了 下 地 址 。 | 


18.4.4 统计 关键 字 


【示例 】 统 计 关键 字 的 查询 结果 的 方法 有 很 多 ， 本 例 通过 正则 表达 式 函 数 explode0 和 ni 
现 统计 关键 字 ， 运 行 结果 如 图 18.4 所 示 。 


lk 把 酒 问 青天 。 不 知 天 上 宫 阅 ， 今 夕 是 何 年 。 我 欲 乘 风电 去 ， 
恺 琼 楼 玉宇 ， 高 处 不 胜 寒 。 起 舞 秀 清 影 ， 何 似 在 人 间 ? 转 朱 阁 ， 低 绑 
， 昭 无限。 不 应 有 恨 ， 个 + 人 有 莫 次 高 合 ， 月 有 阴 晴 贺 
计 ， 此 事 古 难 全 。 但 原 人 长 久 ， 千 里 共 如 如 。 


x 
8 r | 
€ 3 [CTE ET 有 ARE | 


六 你 


18.4 统计 关键 字 结果 


“367。 


网 设计 与 网 站 建设 从 入 门 到 精通 ( 微 课 精 编 版 ) 


【操作 步骤 】 
(1) 新 建 网 页 文档 ， 保 存 为 testl .php。 
| (2) 输入 PHP 脚本 。 首 先 ， 定 义 字符 串 变 量 gstr， 并 为 gstr 赋值 。 然 后 ， 利 用 explode0 函 数 检 
， 索 字符 “人 ”在 $str 中 的 出 现 次 数 ， 并 通过 count0 函 数 输出 检索 的 结果 ， 具 体 代码 如 下 。 


php 
Sstr = "明月 几时 有 ? 把 酒 问 青 天 。 不 知 天 上 宫 阅 , 今夕 是 何 年 。 我 欲 乘 风 归 去 ， 又 恐 琼 楼 玉宇 ， 高 处 不 胜 寒 。 
”起舞 弄 清 影 ， 何 似 在 人 间 ? 
| 。， 塌 打 阅 ， 低 绮 户 ， 归 无 柜 。 不 应 有 恨 ， 何 事 长 向 别 时 加 ?人 有 翡 允 离合， 月 有 胃 哺 加 全 此 事 吉 难 全 。 但 
人 长 入， 千里 共 姓 。 
| $b =explode(" 人", set; 
echo "<p style ='red>"; 
echo $str."<br>"; 
echo "</p>"; 
echo "关键 字 : 人 <br> 共 出 现 :".(count($b)-1)." 次 "; 
> 


| explode0) 函 数 能 够 将 字符 串 分 割 到 数组 中 ,该 函数 返回 一 个 字符 串 数组 , 然后 使 用 count0 函 数 统 
| 计数 组 中 元 素 的 个 数 。 

| explode0O 函 数 是 将 字符 串 分 割 到 数组 中 ， 如 果 字 符 串 中 有 个 与 关键 字 相 匹配 的 项 目 ， 则 返回 的 
| 数组 将 包含 ntl 个 单元 ， 所 以 count0 函 数 在 计算 时 要 减 1。 

| 该 函数 对 分 割 电 子 邮 件 地 址 、 域 名 或 日 期 是 非常 有 用 的 。 一 般 而 言 ， 对 于 同样 的 功能 ， 正 则 表达 
式 函数 运行 效率 要 低 于 字符 串 函数 。 如 果 应 用 程序 足够 简单 ， 那 么 就 用 字符 串 表 达 式 。 但 是 ， 对 于 可 
| 以 通过 单个 正则 表达 式 执行 的 任务 来 说 ， 如 果 使 用 多 个 字符 串 函数 ， 则 是 不 对 的 。 


18.4.5 检测 上 传 文件 类 型 
本 例 采用 正则 表达 式 函 数 preg_match0 实 现 判断 上 传 文件 的 类 型 ， 运 行 结 果 如 图 18.5 所 示 。 


x 
DE hp//locaho.. = a © | E localhost 


>:\Users\8\Picjures\1.png| 浏览 


上 传 为 PNG 类 型 图 片 


图 18.5 检测 文件 类 型 


【操作 步骤】 

(1) 新 建 网 页 文档 ， 保 存 为 testl.php。 
| (2) 设计 如 下 表单 结构 ， 当 单 击 “上传 ”按钮 时 ,利用 preg_match0 函 数 将 上 传 的 数据 信息 进行 
匹配 并 输出 结果 。 
| <form action ="" method="post"> 

<input type="file" name="text"><input type="submit" name="sub" value =" 上 传 "> 
</form> 

| (3) 设计 PHP 脚本 。 使 用 寺 ..else.…. 语 句 谋 套 设 计 多 条 件 检 测 。 从 结构 上 看 不 是 很 明朗 ， 可 以 
”运用 switch 语句 改写 此 实例 ， 相 信 在 系统 运行 效率 上 会 有 所 提高 。 
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<?php 
if($_POST && $ POST[sub]){ 
if(preg_match("/.jpg/",strtolower($_POST['text )){ 


echo "上 传 为 PG 类 型 图 片 "; , 
}else if (preg_match("/.png/",strtolower($ POST['text]))){ 估 站 
echo "上 传 为 PNG 类 型 图 片 "; ~ 
}else if (preg_ match("/.gif/",strtolower($ POST['text])){ Note 
echo "上 传 为 GIF 类 型 图 片 "; 


} 

else if(preg_match("/.rar/",strtolower($ POST['text])){ 
echo "上 传 为 压缩 包 类 型 "; 

yelse{ | 

echo "没有 可 上 传 文件 ， 或 者 是 其 他 文件 类 型 "; | 

} | 

} 

?> 


18.5 在 线 练 习 


正则 表达 式 是 烦琐 的 ， 也 是 强大 的 ， 学 会 之 后 会 让 你 非常 兴奋 ， 与 字符 串 操作 相 结合 ， 除 了 提高 | 
效率 外 ， 会 帮助 你 解决 很 多 棘手 的 技术 问题 。 对 于 初学 者 来 说 ， 本 章 内 容 仅 是 一 个 开始 。 因 此 ， 同 学 
们 应 该 加 强 正则 表达 式 的 操作 训练 ， 感 兴趣 的 同学 可 以 扫 码 练习 。 [ 加 
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数组 是 PHP 中 最 重要 的 数据 类 型 之 一 ， 它 在 PHP 中 的 应 用 非常 广泛 ， 因 为 PHP 是 弱 数 
据 类 型 的 编程 语言 ， 所 以 PHP 中 的 数组 变量 可 以 存储 任意 多 个 、 任 意 类 型 的 数据 ， 并 且 可 
以 实现 其 他 强 数据 类 型 中 的 堆 、 钱 、 队 列 等 数据 结构 的 功能 。 使 用 数组 的 目的 就 是 将 多 个 相 
互 关联 的 数据 组 织 企 一 起 形成 集合 ， 作 为 一 个 单元 使 用 ， 以 达到 批量 处 理 数 据 的 目的 。 


【 学 习 重 点 】 

认识 PHP 数组 

能 金 声 明 一 维 数 组 和 二 维 数据 

能 金 统计 数组 元 素 的 个 数 、 遍 历 和 给 出 数组 
能 够 实现 字符 串 与 数组 之 间 的 转换 

能 够 查询 数组 中 指定 元 素 

添加 、 删 除 和 获取 数组 元 素 


至 吾 吾 吾 吾 至 
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19.1 认识 PHP 数组 


数组 就 是 一 组 数据 的 集合 ， 把 一 系列 数据 组 织 起 来， 形成 一 个 可 操作 的 整体 。 在 PHP 中 , 数组 ， 
较为 复杂 ， 也 更 为 灵活 。 
数组 是 一 组 有 序 的 变量 , 每 个 变量 被 称 为 数组 的 一 个 元 素 . 每 个 元 素 由 一 个 特殊 的 标识 符 来 区 分 ， 
这 个 标识 符 称 为 键 ， 也 称 为 下 标 、 索 引 或 关键 字 。 
数组 的 元 素 都 包含 两 部 分 内容 ， 键 和 值 。 通 过 键 米 基 到 儿 组 中 相应 元 素 的 值 ， 键 可 以 是 数字 ,也 | 
可 以 是 字符 趾 。 
如 果 一 个 变量 就 是 一 个 用 来 存储 人 的 命名 区 域 ,那么 一 个 数组 就 是 一 个 用 来 存储 一 系列 变量 信 的 ， 
命名 区 域 。 因 此 ， 可 以 使 用 数组 组 织 变 最 ， 
例如 ， 一 支 球 队 通常 包含 很 多 运动 员 ， 用 户 无 法 说 出 他 们 的 名 字 ， 但 是 通过 号 码 可 以 对 号 入 应 。 ， 
这 时 ， 我 们 可 以 假设 球 队 就 是 一 个 数组 ， 而 号 码 就 是 数组 的 下 标 ， 当 指明 号 码 时 ， 就 会 找 到 了 该 名 | 
队员 。 
有 了 数组 之 后 ， 我 们 可 以 做 很 多 事情 。 例 如 ， 使 用 循环 语句 ， 设 计 针对 数组 中 每 个 元 素 的 相同 操 
作 ， 这 样 就 可 以 节省 许多 工作 。 作 为 整个 集合 ， 可 以 把 数组 作为 一 个 单元 进行 移动 ， 通 过 这 种 方式 ，， 
只 要 使 用 一 行 代码 ， 所 有 的 数值 就 可 以 传递 给 一 个 函数 。 例 如 ， 按 字母 顺序 对 产品 进行 排序 。 要 完成 
此 操作 ， 可 以 将 整个 数组 传递 给 PHP 的 so0 函 数 。 


19.2 数组 类 型 


PHP 支持 两 种 类 型 的 数组 ， 索 引 数 组 ， 以 数字 作为 键 ， 关 联 数 组 ， 以 字符 串 作 为 键 。 
19.2.1 索引 数组 


索引 表示 元 素 在 数组 中 的 位 置 ， 它 由 数字 组 成 ， 默 认 下 标 从 0 开始 ， 一 般 不 需要 特别 指定 ，PHP 全 大 课本 
会 自动 为 索引 数组 的 键 赋 一 个 数字 ， 然 后 从 这 个 值 开 始 自动 递增 。 用 户 也 可 以 指定 从 基 个 位 置 开始 保 | 
存 数据 。 
【示例 1】 下 面 代码 将 创建 一 个 数组 。 
S$products = array("a", "b", "ce"); 
数组 名 称 为 $products， 它 包含 3 个 值 : "a"、"b"、"c"。 
户 可 以 使 用 运算 符 “=” 简 单 地 将 一 个 数组 复制 给 另 一 个 数组 。 
【示例 2】 下 面 示例 使 用 rangeO 函 数 自动 创建 一 个 从 1 一 10 的 数字 数组 。 
Snumbers = range(1, 10); 
容 提示 : rangeO 函 数 包 含 3 个 参数 ， 分 别 指定 起 始 值 、 结 束 值 和 步 长 ， 其 中 第 3 个 参数 为 可 选 。 例 
如 ， 如 需 建立 一 个 1 一 10 的 奇数 数组 ， 可 以 使 用 如 下 代码 。 
Sodds = range(1, 10, 2); 
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range0) 函 数 也 可 以 对 字符 进行 操作 ， 如 下 例 所 示 。 


Sletters = range("a", "2"); 


访问 数字 索引 数组 ， 可 以 使 用 索引 ， 索 引 值 放 在 数组 名 称 后 面 ， 并 用 方 括号 括 起 来 。 


匡 由 【示例 3】PHP 数组 不 需要 预先 初始 化 或 创建 。 在 第 一 次 使 用 它们 时 ， 会 自动 创建 。 下 面 示例 展 
7 示 了 如 何 写 、 读 数字 索引 数组 。 
‘Sproducts[0]=0; 
S$products[3] = 3 ; 


echo "$products[0] $products[3]"; 
| 上 面 代码 增加 一 个 新 的 元 素 3 到 数组 末尾 ， 这 样 ， 可 以 得 到 一 个 具有 4 个 元 素 的 数组 ， 然 后 再 读 
， 取 部 分 元 素 的 值 。 
【示例 4】 下 面 示例 使 用 for 循环 语句 快速 为 一 个 数组 赋值 ， 并 显示 数组 的 内 容 。 
for($i= 0; $i< 10; $i++) 
$products[$i] = $i: 
for($i= 0; $i< 10; $i++) 
| echo "$products[$1]"; 
， 容 提示 : 也 可 以 使 用 foreach 循环 ， 这 个 循环 语句 是 专门 为 数组 而 设计 的 。 针 对 上 面 示例 ， 可 以 按 
如 下 所 示 的 方式 设计 。 
for($i= 0; $i< 10; $i++) 
Sproducts[$1] = $i; 
foreach($products as $current) 
echo "$current"; 


“19.2.2 关联 数组 
| 关联 数组 的 键 是 字符 串 ， 也 可 以 混合 数字 和 字符 串 ， 而 数字 索引 数组 的 键 名 只 能 为 数字 。 在 一 个 
， 数 组 中 ， 只 要 键 名 中 有 一 个 不 是 数字 ， 那 么 这 个 数组 就 是 关联 数组 。 关联 数组 使 用 字符 串 索引 (或 称 


为 键 ) 来 访问 存储 在 数组 中 各 元 素 的 值 。 
| 【示例 1】 下 面 代码 可 以 创建 一 个 以 产品 名 称 作为 关键 字 、 以 价格 作为 值 的 关联 数组 。 


Sprices = array("a" =>100, "b"=>10, "ce"=>1); 

可 以 通过 如 下 方式 访问 保存 在 $prices 数组 中 的 信息 。 
echo S$prices["a"]; 

echo $prices["b"]: 


echo $prices["c"]:; 
【示例 2】 下 面 代码 将 创建 一 个 与 $prices 数组 相同 的 数组 。 这 种 方法 并 不 是 创建 一 个 具有 3 个 元 


| 素 的 数组 ， 而 是 创建 一 个 只 有 一 个 元 素 的 数组 ， 然 后 再 添加 两 个 元 素 。 


S$prices = array("a" =>100); 
Sprices["b"] = 10; 
Sprices["c"] = 1; 


与 下 面 这 段 代码 有 些 不 同 ， 但 其 功能 与 以 上 代码 是 等 价 的 。 
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Sprices["a"] = 100; 

Sprices["b"] = 10; 

Sprices["c"] = 1: | 

关联 数组 的 索引 不 是 数字 ， 因 此 无 法 使 用 for 循环 语句 对 数组 进行 操作 。 用 户 可 以 使 用 foreach | 会 内 
循环 ， 或 者 list0 和 eachO 函 数 。 | a 

【示例 3】 当 使 用 foreach 循环 语句 对 关联 数组 进行 操作 时 ， 可 以 模仿 19.2.1 节 示 例 使 用 循环 语 国 0 于 要 

句 ， 也 可 以 按 如 下 方式 使 用 关键 字 。 | 

foreach( $prices as $key => $value) 

echo $key.=>".$value.'<br />"; 


【示例 4】 也 可 以 使 用 eachO 函 数 打印 $prices 数组 的 内 容 。 


While ($element = each($prices)) { 
echo Selement[key ]; 
echo =>"; 
echo $element['value']; 
echo '<br />'; 


} 


上 面 示例 输出 结果 如 图 19.1 所 示 。 

each0 函 数 能 够 返回 数组 的 当前 元 素 , 并 将 下 一 个 元 素 作为 当前 
元 素 。 因 为 在 while 循环 中 调用 each0 函 数 , 它 将 按 顺 序 返 回 数组 中 
每 个 元 素 ， 并 且 当 它 到 达 数 组 末尾 时 ， 循 环 操作 将 终止 。 

在 上 面 这 段 代 码 中 ， 变 量 $element 是 一 个 数组 。 当 调用 eachO 
函数 时 ， 它 将 返回 一 个 带 有 4 个 数值 和 4 个 指向 数组 位 置 的 索引 的 


图 19.1 使 用 eachO 函 数 


遍历 数组 
数组 。 位 置 key 和 0 包含 了 当前 元 素 的 关键 字 ， 而 位 置 value 和 1 " 
包含 了 当前 元 素 的 值 。 
19.3 定义 数组 
本 节 将 介绍 如 何 声明 PHP 数组 。 


19.3.1 定义 简单 数组 


在 PHP 中 定义 数组 的 方法 有 如 下 两 种 。 

使 用 arrayO 函 数 声明 数组 。 

直接 为 数组 元 素 赋值 。 

1. 使 用 array0 函 数 

array0 函 数 的 用 法 如 下 所 示 。 

array array([mixed ...]) | 
参数 mixed 表示 key => value, 多 个 参数 mixed 之 间 使 用 逗号 分 卫 , 其 中 key 表示 键 , value 表示 值 。 
键 可 以 是 字符 串 或 数字 。 如 果 省 略 了 键 名 ， 则 会 自动 产生 从 0 开始 的 整数 索引 ; 如果 键 名 是 整 | 
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数 ， 则 下 一 个 键 名 将 是 目前 最 大 的 整数 索引 +1; 如 果 定 义 了 两 个 完全 一 样 的 键 名 ， 则 后 面 一 个 会 


， 盖 前 一 个 。 


SA 


在 数组 中 ， 每 个 元 素 的 数据 类 型 可 以 不 同 ， 也 可 以 是 数组 类 型 。 当 mixed 是 数组 类 型 时 ， 可 以 定 


| 文 二 维 数 组 。 


使 用 arrayO 函 数 声明 数组 时 ， 数 组 下 标 可 以 是 数字 索引 ， 也 可 以 是 关联 索引 。 下 标 与 数组 元 素 值 
之 间 使 用 “=>” 符 号 进行 连接 ， 不 同 数组 元 素 之 间 用 逗号 进行 分 隔 。 

【示例 1】 使 用 array0 函 数 定义 数组 比较 灵活 ， 可 以 直接 传递 值 ， 而 不 必 传递 键 名 。 

<2php 

Sarray = array("a", "b", "ce"); 1/ 定义 数组 

print_r($array); / 输出 数组 元 素 

?> 

输出 结果 如 下 。 

Array ([0] =>a[l]=>b[2]=>¢) 


” 窟 提示 : 可 以 调用 amray0 函 数 ， 不 传递 任何 参数 ， 这 样 将 创建 一 个 空 数组 ， 然 后 使 用 方 括号 [] 语 法 


事后 添加 数组 元 素 值 。 

【示例 2】 创 建 数 组 之 后 ， 可 以 直接 使 用 方 括 号 [语法 读 取 指定 下 标 位 置 的 元 素 的 值 。 
<?php 
Sarray = array("a", "b", "cm); 
echo $array[ 1 ]; 
?> 

输出 结果 如 下 。 
b 

使 用 array0 函 数 定义 数组 时 ， 下 标 默认 从 0 开始 ， 而 不 是 1， 然 后 依次 递 加 。 上 面 代 码 输出 数组 


| 元素 的 第 2 个 下 标 位 置 的 值 。 


【示例 3】 下 面 示例 使 用 array0 函 数 定义 一 个 数组 ， 包 含 两 个 元 素 ， 键 分 别 为 "a" 和 "b"， 对 应 值 


分别 为 "first" 和 "second"。 


<?php 
Sarray = array( 
"an => "first", 
"b" => "second", 
); 
?> 


2. 直接 赋值 
【示例 4】 定义 数组 的 另 一 种 方法 是 直接 为 数组 元 素 赋值 。 如 果 在 创建 数组 时 不 知道 所 创建 数组 


| 的 大 小 ， 或 在 实际 编写 程序 时 数组 的 大 小 可 能 发 生 改变 ， 采 用 这 种 方法 比较 好 。 


<?php 

Sarray[1] = 1; 
Sarray[2] = 2; 
var_dump(S$array); 
3 
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输出 结果 如 下 。 
aray@) { 


[1]=> int(1) 
2]=> int(2, A 
[2]=> int(2) 全 站 
< 注意 : 直接 为 数组 元 素 赋值 时 ， 要 求 同 一 数组 元 素 中 的 数组 名 必须 相同 。 Note 


19.3.2 ”定义 多 维 数组 


当 数 组 的 元 素 是 一 个 数组 时 ， 可 以 创建 一 个 二 维 数组 ， 如 果 它 的 元 素 也 是 一 个 数组 时 ， 就 可 以 构 | 
成 一 个 三 维 数组 ， 依 此 类 推 。 
【示例 1】 下 面 示例 使 用 一 个 二 维 数组 存储 产品 信息 ， 每 一 行 代表 一 种 产品 ， 每 列 代表 一 个 产品 
属性 。 
$products = array(array( 'TIR', 'Tires', 100), 
array('OIL','oil, 10), 
array( 'SPK,', 'Spark Plugs', 4)); 
从 上 面 示例 可 以 看 到 $products 数组 包含 3 个 子 数组 。 
【示例 2】 可 以 模仿 一 维 数组 的 形式 ， 访 问 多 维 数组 元 素 的 值 。 
echo 小 $products[0][0]./.Sproducts[0][1]./.Sproducts[0][2].4<br />"; 
echo '|'.$products[1][0]."".$products[1][1]."".$products[1][2]."<br />'; 
echo "|'.$products[2][0]."".$products[2][1]."".$products[2][2]."<br />"; 
【示例 3】 也 可 以 使 用 嵌 套 for 循环 来 访问 多 维 数组 。 


For ($row=0 ;$row<3;$row++) { 
For ($colum=0; $colum<3; $colum++) { 
echo '|'.$products[$row][$colum]; 


} 
echo '|<br />'; 
} 
以 上 两 种 代码 都 可 以 在 浏览 器 中 产生 相同 的 输出 ， 如 图 19.2 所 示 。 
Ca [ee /ocahosVn PD » B OB locahost - i 
[TIRITires|100| 
IorLleilllol | 


SFR|Spark Plugs|4| 


图 19.2 二 维 数组 输出 | 
比较 上 面 两 个 示例 ， 可 以 看 到 示例 2 的 代码 更 简洁 一 些 。 
【示例 4】 通 过 创建 列 名 来 保存 产品 信息 ， 更 容易 阅读 。 
S$products = array(array(Code' => 'TIR', 
IDescription' => 'Tires', 
"Price' => 100), 


“375。 


[网 区 设 计 与 网 站 建设 从 入 门 到 精通 ( 币 课 精 编 版 


array('Code' => 'OIL', 
‘Description' 一 'oil', 
'Price'’ =>10), 
array(Code' => 'SPK,', 
‘Description' => 'Spark Plugs', 


'Price' =>4)); 
【示例 5】 如果 检索 革 个 值 ， 比 较 容 易 找到 。 但 是 不 能 使 用 顽 套 for 循环 按 顺序 遍历 每 一 列 信息 。 


for ($row = 0; $row < 3; Srow++){ 
echo "|'.$products[$Srow]['Code']. 
小 Sproducts[$row][Description']. 
小 Sproducts[$row][Price].|<BR>': 
} 
| 【示例 6】 配 合 使 用 for 循环 和 while 循环 可 以 快速 访问 上 面 示例 中 的 二 维 数组 。 在 while 循环 中 
| 使 用 each0 和 listO 函 数 遍历 整个 内 部 数组 。 
for ($row = 0; $row < 3; Srow++){ 


while (list( $key, $value) = each($products[ $row ] )){ 
echo "|$value"; 


echo "|<BR>"; 
} 
【示例 7】 下 面 代码 定义 了 一 个 三 维 数组 。 


Scategories = array( array ( array( "TIR", "Tires", 100 ), 
array( "OIL", "Oil", 10 ), 
array( "SPK", "Spark Plugs", 4 ) 
)， 
array ( array( "TIR", "Tires", 100 ), 
array( "OIL", "Oil", 10 ), 
array( "SPK", "Spark Plugs", 4 ) 
); 
array ( array( "TIR", "Tires", 100 ), 
array( "OIL", "Oil", 10 ), 
array( "SPK", "Spark Plugs", 4 ) 
) 
); 
【示例 8】 因 为 这 个 数组 只 有 数字 索引 ， 可 以 使 用 嵌 套 的 for 循环 来 显示 它 的 内 容 ， 代 码 如 下 所 示 。 
for ($layer = 0; $layer < 3; $layer+H) { 
echo "Layer $layer<BR>"; 
for (Srow = 0; $row < 3; Srow++) { 
| for ($column = 0; $column < 3; $column++) { 
echo "|".$categories[S$layer][$Srow][$column]:; 
| } 
| echo "|<BR>"; 


根据 创建 多 维 数组 的 方法 ， 可 以 创建 四 维 、 五 维 或 六 维 数组 。 在 PHP 中 ， 并 没有 设置 数组 维 数 
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的 限制 , 但 一 般 很 难 设想 一 个 多 于 三 维 的 数组 。 大 多 数 的 实际 问题 在 逻辑 上 只 需要 使 用 三 维 或 者 更 少 
维 的 数组 结构 即 可 。 以 上 代码 在 浏览 器 中 的 输出 效果 如 图 19.3 所 示 。 | 
区 画 l==l 


| 

Blocalhost <“ | 
好 

| 


| 
loTLIoilllol 
|SPg|Spark Plugs|4 


图 19.3 三 维 数组 输出 
19.4 使 用 数组 


PHP 为 方便 用 户 操作 数组 ， 提 供 大 量 函数 ， 灵 活 使 用 这 些 函 数 ， 可 以 更 轻松 地 控制 数组 。 同 学 们 
可 以 扫 码 了 解 PHP 数组 函数 的 列表 说 明 。 | 


19.4.1 输出 数组 


在 PHP 中 输出 数组 有 两 种 方式 ， 输 出 元 素 和 输出 整个 数组 。 
输出 元 素 可 以 使 用 输出 语句 实现 ， 如 echo 语句 、print 语句 等 。 
输出 整个 数组 可 以 使 用 print_ r0 和 var_dump0 函 数 等 。 
【示例 】 下 面 示例 展示 了 print r0 和 var_dump0 函 数 输出 整个 数组 的 不 同形 式 。 


Sprices = array("a" =>100, "b"=>10, "ec"=>1); 
Print_r($prices); 
Var_dump(Sprices); 
输出 结果 如 下 。 
Aray ( 
[a] => 100 
[b] => 10 
[c==1 
) 
array(3) { 
["a"]=> int(100) 
["b"]J=> int(10) 
["e"]=> int(1) 
} 


19.4.2 ”统计 元 素 个 数 


使 用 countO 函 数 可 以 统计 数组 中 元 素 的 个 数 ， 具 体 用 法 如 下 所 示 。 
int count( mixed $var [, int Smode= COUNT NORMAL]) L 
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参数 说 明 如 下 。 
var: 数组 或 者 对 象 。 
| 回 mode: 可 选 参数 ， 默 认 值 为 0， 表示 识别 不 了 无 限 递归 。 如 果 设 置 为 COUNT RECURSIVE 
仁 内 | 或 1，count0 函 数 将 递归 地 对 数组 计数 。 
| 【示例 1】 下 面 示例 使 用 count0 函 数 统计 数组 a 中 元 素 的 个 数 ， 返 回 值 为 3。 
Note $a[0] = 1; 
| $a[3] = 3; 
$a[6] = 5; 
echo count($a); 
【示例 2】 下 面 示例 使 用 count0 函 数 统计 二 维 数组 products 中 元 素 的 个 数 ， 返 回 值 为 12。 
S$products = array(array( 'TIR', 'Tires', 100), 
array( 'OIL', ‘oil', 10), 
array( 'SPK', 'Spark Plugs', 4)): 
echo count($products, 1); 


| 全 注意 :需要 设置 第 2 个 和 数值 为 1. 


| 19.4.3 遍历 数组 


| 遍历 数组 就 是 逐一 访问 数组 中 每 个 元 素 , 它 是 一 种 常用 的 数组 操作 , 在 遍历 过 程 中 可 以 完成 查询 、 
| 更 新 等 操作 。 

1. 使 用 foreach 

foreach 是 遍历 数组 元 素 最 常用 的 方法 ， 具 体 用 法 如 下 所 示 。 


foreach(array_expression as $value) 
statement 

foreach(array_expression as $key => $value) 
statement 


| 第 一 种 格式 遍历 给 定 的 array_expression 数组 。 每 次 循环 中 ， 当 前 元 素 的 值 被 赋 给 $value， 且 数组 
| 内 部 的 指针 向 前 移 一 步 ， 下 一 次 循环 中 将 会 得 到 下 一 个 元 素 。 第 二 种 格式 不 仅仅 访问 元 素 的 值 
| (value)， 还 将 当前 元 素 的 键 名 赋 给 变量 $key。 
| 【示例 1]foreach 结构 并 非 操作 数组 本 身 , 而 是 操作 数组 的 一 个 备份 .但 是 用 户 可 以 通过 在 $value 
变量 之 前 加 上 &， 这 样 可 以 引用 赋值 ， 而 不 是 复制 一 个 值 ， 这 样 就 可 以 实现 修改 数组 的 元 素 。 
| Sarr = array(1, 2, 3, 4); 

foreach ($arr as &Svalue) { 

Svalue = $value * 2; 


} 
Var_dump($arr); 


输出 结果 如 下 。 
array(4) { 
[0]=> int(2) 
[1]=> int(4) 
[2]=> int(6) 
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[3]=> &int(8) 
} 


2. 使 用 list0 函 数 | ;> 
list0 函 数 是 把 数组 中 的 值 赋 给 一 些 变 量 。 与 aray0 函数 类 似 ，list0 函 数 不 是 真正 的 函数 ,而 是 一 国外 

种 语言 结构 。list0 函 数 仅 能 用 于 数字 索引 ， 且 索引 值 从 0 开始 的 数组 ， 具 体 用 法 如 下 。 pap 
void list(mixed...) | 


参数 mixed 为 被 赋值 的 变量 名 称 。 
【示例 2】 下 面 示 例 使 用 listO 函 数 将 each0 函 数 返 回 的 两 个 值 分 开 。 
Sprices["a"] = 100; 
Sprices["b"] = 10; 
Sprices["c"] = 1; 
while(list($product, $price) = each($prices)) 
echo "$product => $price<br />"; | 
以 上 代码 使 用 eachO 函 数 从 $prices 数组 中 取出 当前 元 素 ， 并且 将 它 作 为 数组 返回 , 然后 再 指向 下 
一 个 元 素 。 再 使 用 list0 函 数 将 从 each0 函 数 返回 的 数组 中 所 包含 0、1 两 个 元 素 , 变 为 两 个 名 为 $product | 
和 $price 的 新 变量 。 最 后 使 用 while 结构 逐一 把 每 个 元 素 的 值 显示 出 来 。 | 
< 注意 : 当 使 用 each0 函 数 时 ， 数 组 将 记录 当前 元 素 。 如 果 希 望 在 相同 的 脚本 中 两 次 使 用 该 数组 
就 必须 使 用 reset() 函 数 将 当前 元 素 重 新 设置 到 数组 开始 处 。 
Teset($prices) ; 


while(list($product, $price) = each(S$prices)) 
echo "$product => $price<br />"; 


以 上 代码 可 以 将 当前 元 素 重新 设置 到 数组 开始 处 ， 再 次 遍历 数组 。 
19.4.4 数组 与 字符 串 的 转换 


PHP 使 用 explode0 和 implode0 函 数 实现 字符 串 与 数组 之 间 的 相互 转换 。 
1. explode0 函 数 

explode0) 函 数 能 够 把 字符 串 转 换 为 数组 ， 具 体 用 法 如 下 所 示 。 
array explode( string $delimiter , string $string [, int Slimit ] ) 


参数 说 明 如 下 。 

delimiter: 边界 分 隔 字符 。 

string: 输入 的 字符 串 。 | 

limit: 如 果 设 置 limit 参数 ， 且 为 正 数 ， 则 返回 的 数组 包含 最 多 limit 个 元 素 ， 而 最 后 那个 元 
素 将 包含 string 的 剩余 部 分 。 如 果 limit 参数 是 负数 ， 则 返回 除 最 后 的 -limit 个 元 素 外 的 所 有 

元 素 。 如 果 limit 是 0， 则 会 被 当 作 1。 | 
【示例 1】 下 面 示例 将 一 句 话 按 词 分 割 为 一 组 数组 。 

S$php = "PHP is a popular general-purpose scripting language"; 

Sphpl = explode(" ", $php); 

Var_dump($php1); 


图 图 图 
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输出 结果 如 下 。 


array(7) { [0]=> string(3) "PHP" [1]=> string(2) "is" [2]=> string(1) "a" [3]=> string(7) "popular" [4]=> string(15) 
"general-purpose" [5]=> string(9) "scripting" [6]=> string(8) "language" } 


到 2. implodeO 函 数 
Note implodeO 函 数 能 够 将 一 个 一 维 数组 的 值 转换 为 字符 串 ， 具 体 用 法 如 下 所 示 。 
| string implode( string $glue, array $pieces ) 
| string implode( array $pieces ) 


参数 glue 为 分 隔 的 字符 串 ， 默 认为 空 字符 串 。 参 数 pieces 表示 要 转换 的 数组 。 
| 【示例 2】 下 面 示例 把 数组 array('ASP', 'PHP', JSP) 转 换 为 字符 串 表 示 。 

S$array = array('ASP", 'PHP', 'JSP); 

S$str = implode(",", $array); 

echo $str; 


输出 结果 如 下 。 
ASPPHPJSP 


19.4.5 “数组 排序 


PHP 提供 多 个 数组 排序 的 方法 , 如 sortO 、rsortO 、asort0 、arsort0 、ksortO 、krsort0、usortO、uksortO、 
| uasort0， 下 面 结合 示例 进行 简单 说 明 。 
| 【示例 1】 常 用 sort0 函 数 进 行 排序 。 下 面 代码 可 以 将 数组 按 字 母 升序 进行 排序 。 
S$products = array( "Tires", "Oil", "Spark Plugs" ); 
sort($products); 
Print_r($products); 
输出 结果 如 下 。 
Array ( [0] => Oil [1] => Spark Plugs [2] => Tires ) 
【示例 2】 如 果 数 组 元 素 的 值 是 数字 ， 将 按 数 字 升 序 进行 排序 。 
Sprices = array( 100, 10, 4 ); 
sort($prices); 
Print_r($prices); 
输出 结果 如 下 。 
Aray ([0] =>4[1] =>10[2] => 100) 


< 注意 : sortO 函 数 是 区 分 字母 大 小 写 的 。 所 有 的 大 写字 母 都 在 小 写字 母 的 前 面 ， 所 以 A 小 于 Z， 
而 Z 小 于 a。 


sort0) 函 数 包含 一 个 可 选 参 数 ,设置 排序 方式 .这 个 可 选 参 数值 可 以 为 SORT_REGULAR( 默 认 值 )、 
”SORT_NUMERIC 或 SORT_STRING。 指 定 排序 类 型 的 功能 是 非常 有 用 的 ， 例 如 ， 当 要 比较 可 能 包含 
| 有 数字 2 和 12 的 字符 串 时 。 从 数字 角度 看 ，2 要 小 于 12， 但 是 作为 字符 串 ，"12" 却 要 小 于 "2"。 
| 使 用 asort0 和 ksort0 函 数 可 以 对 关联 数组 进行 排序 。 如 果 使 用 关联 数组 存储 各 个 项 目 和 它们 的 价 
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格 ， 就 需要 用 不 同 的 排序 函数 使 关键 字 和 值 在 排序 时 仍然 保持 一 致 。 


【示例 3] 下 面 代码 将 创建 一 个 包含 3 个 产品 及 价格 的 数组 , 然后 将 它们 按 价格 的 升序 进行 排序 。 | 
Sprices = array( "Tires"=>100, "Oil"=>10, "Spark Plugs"=>4 ); 
asort($prices); | 
print (Spriees); | 鲜 


输出 结果 如 下 。 | vote 
Array ( [Spark Plugs] => 4 [Oil] => 10 [Tires] => 100 ) | 


函数 asort0 将 根据 数组 的 每 个 元 素 值 进行 排序 。 在 这 个 数组 中 ， 元 素 值 为 价格 ， 而 关键 字 为 文字 
说 明 。 | 


而 不 是 按 值 排序 。 
S$prices = array( "Tires"=>100, "Oil"=>10, "Spark Plugs"=>4 ); 
ksort(Sprices); 
Print_r($prices); 
输出 结果 如 下 。 
Array ( [Oil] => 10 [Spark Plugs] => 4 [Tires] => 100 ) 


站 提示 : sort0、asort0 和 ksort0 这 3 个 函数 部 全 数组 接 开 序 排 序 ， 与 之 对 应 的 反 向 排序 的 函数 是 | 
IsortD、arsort0 和 krsortO0。 反 向 排序 函数 与 排序 函数 的 用 法 相同 。 函 数 Tsort0 将 一 个 一 维 
索引 数组 按 降 序 排序 。 函 数 arsort0 将 一 个 一 维 关联 数组 按 每 个 元 素 值 的 降序 排序 。 函 数 
krsortO 将 根据 数组 元 素 的 关键 字 将 一 维 数组 按照 降序 排序 。 
【示例 $】 下 面 示例 定义 了 一 个 二 维 数组 。 这 个 数组 存储 了 3 种 产品 的 代码 、 说 明和 价格 。 
S$products = array( array( "TIR", "Tires", 100 ), 
array( "OIL", "Oil", 10 ), 
array( "SPK", "Spark Plugs", 4 ) ); 


下 面 定 义 一 个 排序 函数 ， 然 后 利用 这 个 排序 函数 ， 按 字母 顺序 对 单数 组 中 的 第 二 列 进 行 排序 。 


function compare($x, $y){ 
if( $x[1] — $y[1]) 
return 0; 
else if ( $x[1] < $y[1] ) 
return -1; 
else 
return 1; 


【示例 4】 如 果 不 是 按 价格 排序 ， 而 要 按说 明 排 序 ， 就 可 以 使 用 ksort0 函 数 ， 它 是 按 关 键 字 排序 


所 
usort($products, "compare"); 
Print_r($products); 


输出 结果 如 下 。 


Aray ( 
[0] => Array ( 
[0] = OIL 
四 二 oil 
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四 一 10) 
[1] => Aray ( 
[0] = SPK 
| [1] => Spark Plugs 
| 四 一 4) 
a 四 全 Amay( 
Note BI 
| [1] => Tires 
加 一 100) 
j 
| 在 上 面 示 例 中 ， 排 序 函 数 被 命名 为 compare0， 该 函数 有 两 个 参数 : $Sx、$y。 该 函数 的 作用 是 比 
| 较 两 个 值 的 大 小 。$x 和 $y 将 是 主 数组 中 的 两 个 子 数组 ， 分 别 代表 一 种 产品 。 因 为 计数 是 从 0 开始 的 ， 
| 说明 字段 是 这 个 数组 的 第 二 个 元 素 ， 所 以 为 了 访问 数组 $x 的 说 明 字段 ， 需 要 输入 $x[1] 和 $y[1] 来 比较 
两 个 传递 给 函数 的 数组 的 说 明 字 段 。 
| 【示例 6】 如 果 要 让 数组 按 男 一 种 顺序 存储 , 只 要 编写 一 个 不 同 的 比较 函数 。 要 按 价 格 进 行 排序 ， 
| 就 必须 查看 数组 的 第 三 列 ， 从 而 创建 如 下 所 示 的 比较 函数 。 
function compare($x, $y){ 
if( $x[2] =— $y[2] ) 
return 0; 
else if ( $x[2] < $y[2] ) 
return -1; 
else 
retum 1; 


} 


当 调 用 usort($products, "compare") 时 ， 数 组 将 按 价 格 的 升序 来 排序 。 
| 【示例 7】 要 进行 反 向 排序 ，$x 小 于 $y 时 函数 需要 返回 1，$x 大 于 $y 时 函数 需要 返回 -1， 这 样 
就 做 成 了 一 个 反 向 排序 。 
| function reverseCompare($x, $y){ 
if( $x[2] = $y[2] ) 
return 0; 
else if ( $x[2] < $y[2] ) 
return 1: 
else 
return -1; 


} 
调用 usort($products, "reverseCompare") 时 ， 数 组 会 按 价格 的 降序 来 排序 。 


| 19.4.6 ”数组 指针 


在 PHP 中， 每 个 数组 内 都 有 一 个 当前 元 素 。 当 创建 新 数组 时 ， 当 前 元 素 初始 化 为 第 一 个 元 素 。 
调用 current($array_name) 函 数 ， 将 返回 当前 元 素 。 

调用 next0 或 eachO 函 数 将 使 内 部 指针 前 移 一 个 元 素 。 

调用 each($array_name) 函 数 将 返回 当前 元 素 ， 并 将 内 部 指针 前 移 一 个 元 素 。 

调用 next($array_name) 函 数 将 内 部 指针 前 移 ， 然 后 再 返回 新 的 当前 元 素 。 

使 用 resetO 函 数 将 返回 数组 第 一 个 元 素 ， 并 把 它 设置 为 当前 元 素 。 


图 图 图 图 加 
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回 ”调用 end($array name) 可 以 将 内 部 指针 移 到 数组 末尾 ， 并 返回 最 后 一 个 元 素 。 
调用 prev0 函 数 可 以 将 当前 指针 往 回 移 一 个 位 置 ， 然 后 再 返回 新 的 当前 元 素 。 
【示例 】 下 面 示例 将 反 向 显示 一 个 数组 的 内 容 。 


Sarray = array(1, 2, 3); 全 
$value = end($array); | 


while (Svalue){ Note 
echo "$value<br>"; | 
Svalue = prev($array); 
} 
输出 结果 如 下 。 


3 
2 
1 


使 用 eachO、currentO、reset0、end0、nextO0、pos0 和 prev0 函 数 可 以 编写 按 指定 顺序 浏览 数组 的 
代码 。 | 


19.5 操作 元 素 


用 户 可 以 操作 数组 中 的 元 素 ， 如 添加 、 删 除 和 查询 元 素 的 。 
19.5.1 查询 指定 元 素 


使 用 array_search0 函 数 可 以 在 数组 中 搜索 给 定 的 值 ， 如 果 找 到 后 则 返回 键 名 ， 否 则 返回 false。 | R 
在 PHP 4.2.0 之 前 ， 该 函数 在 失败 时 返回 null， 而 不 是 flse， 有 具体 用 法 如 下 所 示 。 | 

mixed array_search( mixed $needle , array $haystack [, bool $strict = false ] ) 

参数 说 明 如 下 。 

回 needle: 搜索 的 值 。 如 果 needle 是 字符 串 ， 则 比较 以 区 分 大 小 写 的 方式 进行 。 

回 “haystack: 被 搜索 的 数组 。 

回 strict， 可 选 参数 ， 如 果 值 为 tue， 还 将 在 数组 中 检查 给 定 值 的 类 型 。 

【示例 】 下 面 示例 先 声明 一 个 数组 ， 然 后 使 用 array_search0 函 数 检索 指定 的 值 。 


S$array = array(0 => 'blue', 1 => 'red', 2 => 'green', 3 => Ted); 
echo array_search('green', $array); 

echo array_search('red', $array); 

输出 结果 如 下 。 


了 
1 


19.5.2 ”获取 最 后 一 个 元 素 
| 回 
使 用 array pop0O 函 数 可 以 获取 数组 中 的 最 后 一 个 元 素 , 并 将 数组 的 长 度 减 1, 此 过 程 也 称 为 出 栈 。 人、 视频 讲解 
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总 
| 如 果 数 组 为 空 ， 或 者 不 是 数组 ， 将 返回 null， 具 体 用 法 如 下 所 示 。 
| mixed array_pop( array &$array ) 


【示例 】 下 面 示例 应 用 array_pop0 函 数 获取 数组 中 最 后 一 个 元 素 。 


‘Note S$stack = array("red", "green", "blue"); 
| S$fruit = array_pop($stack); 
| print r($stack); 


输出 结果 如 下 。 


Aray ( 
[0] => red 
[1] => green 
) 


19.5.3 ”添加 元 素 


。 参数 anmay 表示 被 操作 的 数组。 


| 使 用 array_pushO 函 数 可 以 向 数组 中 添加 元 素 。array_pushO 函 数 将 数组 当成 一 个 栈 ， 并 将 传 入 的 
| 变量 压 入 数组 的 末尾 ， 数组 的 长 度 将 根据 入 栈 变 量 的 数目 而 增加 ， 有 具体 用 法 如 下 所 示 。 


int array_push( array &S$array , mixed $var [, mixed $... ] ) 
参数 array 表示 要 输入 的 数组 ，var 表示 要 压 入 的 值 。 最 后 返回 处 理 之 后 数组 的 元 素 个 数 。 
【示例 】 下 面 示例 应 用 array pushO 函 数 向 数组 中 添加 一 个 元 素 。 
S$stack = array("red", "green", "blue"); 
Sfruit = array_push($stack, "yellow"); 
Print_r($stack); 
输出 结果 如 下 。 
Array ( [0] => red [1] => green [2] => blue [3] => yellow ) 


19.5.4 “删除 重复 元 素 


回 使 用 array_unique0 函 数 可 以 删除 数组 中 重复 的 元 素 。array_unique0 函 数 先 将 值 作为 字符 串 排序 ， 
视频 讲解 ”然后 对 每 个 值 只 保留 第 一 个 遇 到 的 键 名 ， 接 着 忽略 所 有 后 面 的 键 名 ， 具 体 用 法 如 下 所 示 。 

array array_unique( array $array [, int $sort flags = SORT_STRING ] ) 

| 参数 array 表示 要 操作 的 数组 ，sort_flags 为 可 选 参数 ， 表 示 设 置 排序 的 行为 ， 取 值 说 明 如 下 。 

| 回 SORT REGULAR: 按 正 常 顺 序 比 较 项 目 ， 不 改变 类 型 。 

| 回 SORT NUMERIC: 比较 项 目 数值 。 

| 回 ”SORT STRING: 以 字符 串 顺 序 比较 项 目 。 

| 回 SORT LOCALE STRING: 根据 本 地 字符 串 顺序 比较 项 目 。 

| 【示例 】 下 面 示例 应 用 array_unique0 函 数 删 除数 组 中 重复 的 元 素 。 

| S$input = array("a" => "green", "red", "b" => "green", "blue", "red"); 


Sresult = array_unique($input): 
Print_r($result); 
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输出 结果 如 下 。 

Array ( 
[a] 一 green | 
[0] => red | 
[1] => blue | 全 站 


) | 
MA Lo 
19.6 案例 实战 

本 节 将 通过 多 个 案例 展示 PHP 数组 操作 的 一 般 应 用 。 


19.6.1 定义 特殊 形式 的 数组 
【示例 1】 自 PHP 5.4 起 ， 可 以 使 用 短 数组 定义 语法 ， 定 义 方法 。 使用] 蔡 代 array0。 


岩 提示 : 键 可 以 为 整数 或 字符 囊 ， 值 可 以 为 任意 类 型 数据 。 PHP 能 够 对 键 进行 强制 转换 ， 具 体 说 | 
明 如 下 。 | 

回 ”如 果 键 为 合法 的 整 型 值 的 字符 串 ,， 则 会 被 转换 为 整 型 ,如 "8" 实 际会 被 储存 为 8, 而 "08" 
不 是 合法 的 整 型 | 

如 果 键 为 浮 点 数 ， 则 会 被 转换 为 整 型 ， 如 8.0 实际 会 被 储存 为 8。 

如 果 键 为 布尔 值 ， 也 会 被 转换 成 整 型 ， 如 true 实际 会 被 储存 为 1，false 会 被 储存 为 0。 

如 果 键 为 Null， 则 会 被 转换 为 空 字符 串 ， 如 null 实际 会 被 储存 为 " 

如 果 键 为 数组 或 对 象 ， 则 会 抛 出 警告 。 


【示例 2】 在 定义 数组 时 ， 如 果 多 个 单元 都 使 用 了 同一 个 键 名 ， 则 只 使 用 了 最 后 一 个 单元 , 之 前 | 
的 都 会 被 覆盖 。 | 
<?php 
Sarray = array( // 定义 数组 

l=> "a 

"1" => "bn 

1.5 => "e", 

true > "adm 


因 办 加 的 


天 
print_r(Sarray); / 输出 数组 元 素 

echo "<br>"; 

echo $array[0]; // 抛 出 错误 

echo $array[1]; // 输出 数组 元 素 的 值 | 
> 人 
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| 
| 
| 


贷 二 


输出 结果 如 下 。 


在 上 面 示例 中 ， 所 有 的 键 名 都 被 强制 转换 为 1， 则 每 一 个 新 单元 都 会 覆盖 前 一 个 的 值 ， 最 后 剩 下 
的 只 有 一 个 值 : "d"。 
【示例 3】PHP 允许 数组 可 以 同时 含有 整 型 和 字符 串 类 型 的 键 。 


输出 结果 如 下 。 


【示例 4】 如 果 值 没有 指定 键 ， 则 取 当 前 最 大 的 整数 索引 值 加 1， 如 果 指 定 的 键 已 经 有 值 ， 则 该 
值 会 被 覆盖 。 


输出 结果 如 下 。 


【示例 5】 也 可 以 对 部 分 单元 指定 键 名 。 


输出 结果 如 下 。 


一 一 
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[5]=> string(1) "1" 


[6]=> string(1) "b" 
中 
在 上 面 示例 中 ， 可 以 看 到 最 后 一 个 值 "b" 被 自动 赋予 键 6， 因 为 之 前 最 大 的 整数 键 是 5。 会 内 
19.6.2 设计 购物 车 ps 


本 例 综合 运用 PHP 各 种 数组 函数 ， 实 现 更 新 数组 中 的 元 素 值 。 示 例 设计 一 个 购物 车 ， 通 过 数组 | 
函数 对 数组 中 存储 的 商品 数量 进行 修改 ， 演 示 效 果 如 图 19.4 所 示 。 


EEC] 由 ”六 


购物 车 
商品 名 称 
古本 电脑 


效 吗 相机 


智能 手机 


瑞士 手 素 


图 19.4 设计 简单 的 购物 车 
示例 代码 如 下 。 


<?php | 
/ 初始 化 数据 | 
Sname = "平板 电脑 @ 数 码 相 机 @ 智 能 手机 @ 瑞 士 手表 "; 。 ”// 定义 字符 串 | 
Sprice ="14998@2588@2666@66698"; | 
$counts = "23@2@3@4"; | 


Sarrayid=explode("@",$name); / 将 商品 ID 的 字符 串 转 换 到 数组 中 
S$arraynum=explode("@",$price): / 将 商品 数量 的 字符 串 转 换 到 数组 中 
S$arraycount=explode("@",$counts); // 将 商品 数量 的 字符 串 转换 到 数组 中 
1/ 获取 用 户 更 新 数据 
iftisset($_POST["Submit"]) && $_POST["Submit"]=—true){ 
$id=$ POST["name"]; / 获取 要 更 改 的 元 素 名 称 | 
Snum=$ POST["counts"]; / 获取 更 改 的 值 | 
Skey=array_search($id, Sarrayid); // 在 数组 中 搜索 给 定 的 值 ， 如 果 成 功 返 回 键 名 
Sarraycount[Skey]=Snum: // 更 改 商品 数量 | 
Scounts=implode("@",$arraycount); // 将 更 改 后 的 商品 数量 添加 到 购物 车 中 | 
学 | 
全 
<hl> 购 物 车 <hl> | 
<table> | 
< 
<th> 商 品名 称 </th> | 
<th> 价 格 <th> | 
<th> 数 量 </th> | 
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<th> 人 金额 </th> 
</> 


<?php 
for($i=0;$i<count(Sarrayid);SiH+){ // for 循环 读 取 数 组 中 的 数据 


医 册 | <form name="forml <?php echo $i?>" method="post" action=""> 
| <td><?php echo $arrayid[$i]; ?></td> 
| <td><?php echo Sarraynum[$i]: ?></td> 
| <td><input name="counts" type="text" id="counts" value="<?php echo $arraycount[$1]: ?>" size="8"> 
<input name="name" type="hidden" id="name" value="<?php echo $arrayid[$i]; ?>"> 
<input type="submit" name="Submit" value=" 更 改 "></td> 
<td><?php echo $arraycount[$i]*$arraynum[S$i]; ?></td> 
</t> 


</table> 


在 页 面 脚本 中 ， 首 先 初始 化 数据 变量 $name、$price 和 $counts， 它 们 分 别 以 字符 串 的 形式 存储 了 
， 商品 名 称 、 价 格 和 订购 数量 。 然 后 ， 使 用 explode0 函 数 将 它们 转换 为 数组 。 接 着 ， 使 用 for 语句 把 它 
， 们 显示 在 页 面 中 。 
| 当 用 户 修改 订购 数量 ， 单 击 “ 更 改 ” 按钮 提交 时 ， 则 使 用 array_search0 函 数 找到 用 户 修改 的 商品 ， 
， 然后 更 新 其 中 的 订购 数 ， 同 时 再 更 新 显示 。 最 后 ， 再 使 用 implode0 函 数 把 数组 转换 为 字符 串 进行 存储 。 


| 19.6.3 设计 多 文件 上 伟 


本 例 综合 运用 数组 函数 ， 同 时 实现 将 任意 多 个 文件 上 传 到 服务 器 的 功能 。 其 中 ， 使 用 move_ 
| uploaded_file0 函 数 完成 文件 上 传 操作 ， 关 于 文件 操作 的 详细 介绍 ， 请 参考 后 面 章 节 内 容 ; 使 用 array_ 
| push0 函 数 向 数组 中 添加 元 素 ; 使 用 array_unique0 函 数 删除 数组 中 重复 的 元 素 ; 使 用 array_pop0 函 数 
| 获取 数组 中 最 后 一 个 元 素 ; 使 用 count0 函 数 获取 数组 的 元 素 个 数 ， 示 例 演示 效果 如 图 19.5 所 示 。 


EY 四 - @ hp//ocohostrost.pne -ac|ssxsts “RE 祈 得 
多 文件 同 传 (5 个 文件 以 内 任意 上 传 ) 


内 容 1: CnUsersiBVideosic2iljpg 到 
内 容 2: CUsersiBiVideosWpic22jpg 列 页 一 
内 容 3: CIUsersBVideospic23jpg 到 
内 容 4: CnUsersi8Videosic24 png 


内 容 5: CnUsers8Videoswic2i5jpg 


TITTT 


文件 上 传 成 功 ， 请 稍 等 


图 19.5 设计 多 文件 同时 上 传 
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S 
(1) 在 testphp 文件 中 创建 表单 ， 设 置 post 方式 提交 数据 ， 定 义 enctype="multipart/form-data" 
属性 ， 添 加 表单 元 素 和 5 个 文件 域 ， 完 成 文件 的 提交 操作 。 | 
<form action="ok.php" method="post" enctype="multipart/form-data" name="forml"> | 
2 全 
<td> 内 容 1: </td> | 册 ~ 


<td><input name="picture[]" type="file" id="picture[]" size="30"></td> Note 
</t><tr> | 
<td> 内 容 2: </td> | 
<td><input name="picture[]" type="file" id="picture[]" size="30"></td> 
</t><tr> 
<td> 内 容 3: </td> 
<td><input name="picture[]" type="file" id="picture[]" size="30"></td> 
</t><tr> 
<td> 内 容 4: </td> 
<td><input name="picture[]" type="file" id="picture[]" size="30"></td> 
</tr><tr> 
<td> 内 容 5: </td> 
<td><input name="picture[]" type="file" id="picture[]" size="30"></td> 
</t><t> 
<td colspan="2"><input type="image" name="imageField" src="images/btn.jpg"></td> 
</t> 
</form> 


(2) 在 ok.php 文件 中 ， 通 过 $_FILES 预定 义 变量 获取 表单 提交 的 数据 ， 通 过 数组 函数 完成 对 上 
传 文件 元 素 的 计算 。 
(3) 使 用 move_uploaded_file0 函 数 将 上 传 的 文件 添加 到 服务 器 指定 文件 夹 中 。 具 体 代码 如 下 。 


<?php 

if(!is_dir("./upfile")){ / 判断 服务 器 中 是 否 存 在 指定 文件 夹 
mkdir("./upfile"); // 如 果 不 存在 ， 则 创建 文件 夹 

} 

array_push($_FILES["picture"]["name"],""); / 向 表单 提交 的 数组 中 增加 一 个 空 元 素 

Sarray=array_unique($_FILES["picture"]["name")); / 删除 数组 中 重复 的 值 

array_pop($array); / 删除 数组 中 最 后 一 个 单元 

for($i=0;$i<count(Sarray):$i++){ // 根据 元 素 个 数 执行 for 循环 


$path="upfile/".$_FILES["picture"]["name"][$i]; 。” // 定义 上 传 文件 存储 位 置 
if(move_uploaded_file($_FILES["picture"]["tmp_name"][$i],$path)){// 执行 文件 上 传 操作 


Sresult=true; 
}else{ 
Sresult=false; 
} 
} 
if($result==true){ | 


echo "文件 上 传 成 功 ， 请 稍 等 …"; | 
echo "<meta http-equiv=\"refresh\" content=\"1; url=test.php\">"; | 
Jelse{ | 

echo "文件 上 传 失败 ， 请 稍 等 …"; | 
echo "<meta http-equiv=\"refresh\" content=\"1; url=test.php\">"; | 


Ne 
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197 在 线 练 习 


[ 具 之 一 ， 借 助 数 组 的 强大 功能 ， 可 以 对 大 量 类 型 相同 的 数据 进行 读 写 、 


数组 是 有 效 管理 
排序 、 插 入 和 删除 等 操作 ,从 而 提高 程序 的 执行 效率 , 优化 程序 代码 。 PHP 提供 了 大 量 数组 操作 函数 ， 


| 对 于 初学 者 来 说 ， 需 要 强化 训练 以 期 掌握 它们 的 用 法 和 应 用 技巧 。 感 兴趣 的 同学 可 以 扫 码 练习 。 
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在 网 页 中 使 用 PHP 


网 页 与 PHP 互动 ， 主 要 通过 表单 来 实现 的 。 浏 览 者 可 以 通过 表单 提交 数据 ， 或 者 通过 
URL 附加 参数 ， 向 PHP 传 逐 信息 。PHP 通过 预定 义 变量 来 接收 这 些 信 息 。 本 章 将 详细 介绍 
PHP 是 如 何 获取 客户 端的 请 求 ， 以 及 如 何 响应 用 户 的 交互 过 程 


【 学 习 重 点 】 

了 解 表单 结构 和 表单 对 象 

根据 需要 设计 网 页 表单 

理解 提交 表单 的 内 在 机 制 

设计 URL 查询 字符 串 ， 并 使 用 _ GET 接收 URL 参数 
使 用 8$ POST 接收 不 同 表单 对 象 的 值 

正确 使 用 URL 编码 方法 


至 豆 吾 吾 至 至 
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20.1 PHP 交互 基础 


全 2 
” ”下 面 介绍 PHP 服务 器 与 客户 端 页 面 实现 数据 交互 的 基本 方法 ， 包 括 表单 提交 数据 的 方式 和 服务 
7 届 器 接收 表单 数据 的 方法 。 


昌 20.1.1 定义 数据 传输 类 型 


<form> 标 签 包含 一 个 enctype 属性 ， 该 属性 可 以 定义 表单 数据 的 编码 类 型 。 常 用 类 型 包括 两 种 ， 
视频 讲解 ”说明 如 下 ， 另 外 还 可 以 设置 text/plain 类 型 ， 以 直接 字符 形式 进行 传递 ， 该 类 型 不 常用 。 
| 1. application/x-www-form-URLencoded 
| application/x-www-form-URLencoded 是 默认 编码 类 型 。 表 单数 据 被 编码 为 “名 / 值 ”对 的 形式 (这 
| 是 标准 的 编码 格式 )。 
| 这 种 编码 方式 将 空格 用 + 代替 ， 非 字母 和 数字 字符 用 以 %hh 表示 的 该 字符 的 ASCI 编码 代替 〈 汉 
| 字 就 是 这 种 形式 )， 而 变量 和 值 使 用 = 连接 在 一 起 ， 各 个 变量 和 值 对 之 间 使 用 & 连 接 。 通 过 这 种 方式 把 
| 表单 中 输入 的 数据 进行 打包 ， 并 发 送 到 服务 器 端 ， 示 意 如 图 20.1 所 示 。 


客户 端 
浏览 器 
表单 


图 20.1 URLencoded 编码 数据 传输 格式 


| application/x-www-form-URLencoded 编码 方式 不 能 传递 二 进 制 数据 流 ， 不 适合 文件 上 传 , 它 只 能 
| 提交 符合 ASCII 编码 的 文本 字符 串 。 

| 2. multipart/form-data 

| multipart/form-data 编码 可 以 把 表单 数据 编码 为 多 条 消息 , 其 中 每 个 表单 域 对 应 一 个 消息 块 。 这 种 
| 方式 传输 的 消息 包含 了 一 系列 的 数据 块 , 每 一 个 数据 块 代表 表单 中 的 一 个 表单 域 变 量 , 并 且 数 据 块 的 
排列 顺序 与 页 面 中 表单 域 的 排列 顺序 是 一 一 对 应 的 。 数 据 块 与 数据 块 之 间 使 用 特殊 字符 分 隔 ,示意 如 


| 图 20.2 所 示 。 
HTTP 主体 部 分 
消 -…。 
de 及 服务 器 端 
浏览 器 脚本 文件 
表单 


: 1001100011101001 


图 20.2 ”form-data 编码 数据 传输 格式 
multipart/form-data 编码 方式 可 以 用 来 传输 二 进 制 数据 或 者 非 ASCII 字符 的 文本 (如 图 片 、 不 同 
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格式 的 文件 等 )。 注意， 只 有 使 用 multipart/form-data 方式 ， 才 能 完整 地 传递 文件 数据 。 但 是 这 种 编码 
方式 在 客户 端 和 服务 器 端 都 会 有 很 多 限制 。 | 


癌 提示 : multipart/form-data 编码 方式 ， 必 须 使 用 POST 方法 ，GET 方法 无 法 处 理 这 样 的 表单 数据 。 


20.1.2 ”定义 表单 提交 方法 


指定 表单 数据 的 编码 类 型 之 后 ， 还 需要 设置 表单 数据 的 发 送 方法 。<form> 标 签 通过 method 属性 | 
定义 发 送 数据 的 方法 。method 属性 取 值 包括 get 和 post (默认 )。 这 两 种 方法 在 数据 传输 过 程 中 分 别 “1 
对 应 于 HTTP 协议 中 的 GET 和 POST 方法 ， 简 单 区 别 如 下 。 | 
回 ”GET 方法 ,是 将 表单 数据 作为 字符 串 附 加 到 URL 后 面 ， 用 “?” 符 号 进行 区 分 ， 每 个 表单 域 | he 
(“名 / 值 ”对 ) 之 间 用 “& ”符号 隔 开 ， 然 后 把 整个 字符 串 发 送 到 服务 器 端 ， 例 如 : | 
rs | 
容 提示 : 这 些 被 传递 的 参数 ， 也 被 称 为 查询 字符 囊 ， 详 细 说 明 请 参考 20.1.3 节 内 容 。 


于 系统 环境 变量 的 长 度 ， 限 制 了 输入 字符 串 的 长 度 ， 因 此 GET 方法 所 发 送 的 信息 不 能 太 长 ， 
一 般 在 4000 字符 左右 ， 而 且 不 能 含有 非 ASCII 码 字符 。 | 

于 GET 方法 通过 在 浏览 器 的 地 址 栏 中 以 显 式 方式 传递 表单 数据 ， 也 带 来 了 信息 传递 的 安全 性 | 
问题 ， 因 此 使 用 时 务必 小 心 。 一 般 用 于 传递 简单 的 、 非 重要 的 参数 信息 。 | 
回 ”POST 方法 是 将 表单 数据 进行 加 密 ， 并 随 HTTP 数据 流 一 同 发 送 到 服务 器 。 这 种 方法 发 送 的 
数据 量 基本 上 没有 什么 限制 , 因此 在 表单 设计 中 作为 推荐 方法 进行 设置 。 如 果 设 计 上 传 文件 | 
时 ， 必 须 设置 POST 方法 。 | 


20.1.3 ”认识 查询 字符 串 


如 果 在 <form> 标 签 中 ， 设 置 method 属性 值 为 GET 方法 ， 则 表单 数据 将 通过 URL 附加 的 查询 字 
符 串 把 数据 传递 给 服务 器 。 

查询 字符 串 是 由 一 个 或 多 个 “名 / 值 ”对 的 字符 串 组 成 ， 多 个 “名 / 值 ”对 之 间 通 过 特殊 字符 (&) 
连接 在 一 起 ， 构 成 一 长 串 的 字符 串 ， 常 被 用 来 传递 一 些 简单 的 参数 ， 其 语法 格式 如 下 。 

namel=valuel&name2=value2&..&namen=valuen 


其 中 , namel=valuel 就 表示 一 个 “名 / 值 ” 对 。 在 所 有 参数 中 ,name 表示 查询 字符 串 的 参数 名 称 ， 
而 value 表示 查询 字符 串 的 参数 值 。 指 定 其 中 参数 的 名 称 就 可 以 获取 该 参数 的 值 。 

查询 字符 串 附 加 在 URL 后 面 ， 存 储 在 HTTP 请 求 的 头 部 区 域 ， 因 此 所 传输 的 数据 结构 就 比较 简 
单 ， 不 能 够 存储 大 容量 的 信息 ， 一 般 能 够 发 送 最 大 数量 约 为 2000 个 字符 ， 作 为 查询 字符 串 的 一 部 分 
发 送 的 ， 超 过 这 个 数目 的 其 他 数据 将 不 会 被 处 理 。 

查询 字符 串 与 URL 通过 问号 〈?) 连接 在 一 起 ， 这 样 PHP 脚本 就 能 够 准确 获取 查询 字符 串 的 内 
容 ， 而 URL 也 能 够 正确 定位 到 指定 目标 ， 例 如 : 

<a href="detail.php?id=1&class=3&subclass=24&key=]i"> 显 示 查 询 信息 </a> 


上 面 的 超 链接 中 就 提供 了 4 个 参数 ，detail.php 页 面 能 够 通过 这 4 个 参数 可 以 在 数据 库 中 查询 到 
指定 信息 的 记录 。 

查询 字符 串 中 的 参数 可 以 同名 , 但 HITP 请 求 仍然 能 够 把 所 有 参数 传递 出 去 ,不管 这 些 参 数 名 是 
否 重复 ， 例 如 : 


“393。 


[网 革 设 计 与 网 站 建设 从 入 门 到 精通 ( 币 课 精 编 版 


CO 
光 R 
ST 
<a href="detail.php?id=1&class=3&subclass=24&key=li& id=3&class=2&subclass=21&key=wang "> 显示 查询 信 
| 息 </a> 


20.1.4 设置 PHP 处 理 程序 


， ” 当 用 户 提交 表单 后 , 浏览 器 会 把 表单 数据 上 传 到 服务 器 ,这 个 操作 实际 上 就 是 把 表单 数据 传递 给 
| 另 一 个 脚本 文件 。 

”在 设计 表单 时 ， 必 须 明确 数据 提交 的 目标 ， 这 个 目标 就 是 准备 接收 表单 数据 的 PHP 文件 。 

使 用 <form> 标 签 的 action 属性 ， 可 以 定义 要 接收 表单 数据 的 页 面 ， 例 如 


<form id="forml" name="forml" method="post" action="text.php"> 


rs 
| 上 面 代码 定义 了 表单 数据 传递 给 同一 目录 中 的 text.php 文件 。URL 可 以 是 相对 路 径 , 也 可 以 是 绝 
”对 路 径 。 
| action 属性 还 可 以 设置 电子 邮件 地 址 。 采 用 电子 邮件 方式 时 ， 使 用 “action=mailto: 邮 件 地 址 ”的 
| 格式 来 表示 ， 例 如 ， 


action="maito:zhangsan(@163.com" 


20.1.5 ”PHP 接收 表单 数据 的 方法 


| PHP 获取 表单 数据 主要 是 通过 预定 义 变量 $ POST 和 $_GET 来 实现 。 其 中 ，$_POST 变量 是 一 个 
| 数据 集合 ， 负 责 接 收 表单 以 POST 方法 提交 的 数据 ， 而 $_GET 变量 负责 接收 URL 字符 串 后 面 附加 的 
”查询 字符 串 参 数值 。 
| $_POST 和 $_GET 的 用 法 如 下 。 

$_GET["name"] 

$_ POST["name"] 


其 中 ，name 为 表单 对 象 的 name 属性 值 。 


4 注意 : 使 用 POST 和 $_GET 方法 获取 表单 对 象 的 值 时 ， 为 了 愉 免 异常 ， 应 该 使 用 isset0 函 数 先 
| 检测 $ POST 和 $_GET 变量 是 否 存在 。 只 有 存在 的 情况 下 ， 才 可 以 读 取 $ POST 和 $_GET 
变量 的 值 。 


issetO 函 数 的 语法 格式 如 下 。 
bool isset( mixed $var [, mixed $... ] ) 
| 如 果 var 存在 ， 并 且 值 不 是 NULL， 则 返回 rue， 否则 返回 false。 
| 疙 提示 : 在 20.2 节 案 例 实战 中 ， 将 详细 介绍 $ POST 和 $_GET 变量 获取 表单 数据 的 具体 应 用 。 


20.1.6 在 表单 中 嵌入 PHP 脚本 


通过 在 表单 中 嵌入 PHP 脚本 ， 可 以 动态 设计 表单 对 象 的 默认 值 ， 或 者 动态 设计 表单 结构 。 在 表 
| 单 中 嵌入 PHP 脚本 有 3 种 形式 如 下 。 
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回 ”在 标签 中 嵌入 <?PHP .… ?>， 相 当 于 动态 设计 需要 显示 的 信息 或 表单 对 象 ， 例 如 : 


<h2> 性 别 : 

<?php | 

if (isset(Sgender) && $gender—"female") echo " 女 "; | 1 
让 (isset($gender) && $gender—"male") echo " 男 "; | 全 
je | 

局 Note 


在 属性 中 嵌入 <?PHP .…. ?>， 相 当 于 动态 设置 属性 ， 例 如 : 


性 别 : <input type="radio" name="gender" 
<?php if (isset($gender) && $gender—"female") echo "checked":?> 
value="female"> 女 性 

<input type="radio" name="gender" 
<?php if (isset($gender) && $gender 一 "male") echo "checked":?> 
value="male"> 男 性 
在 属性 值 中 嵌入 <?PHP .… ?>， 相 当 于 为 属性 动态 赋值 ， 例 如 ， 


姓名 : <input type="text" name="name" value="<?php echo $name;?>"> 


202 案例 实战 


下 面 将 结合 案例 来 学 习 PHP 接收 用 户 数据 的 基本 方法 ， 以 及 数据 处 理 的 相关 技巧 。 
20.2.1 ”获取 文本 框 的 值 
使 用 PHP 的 预定 义 变量 8_POST 可 以 获取 文本 框 的 值 。 


a 视频 讲解 
您 提示 : PHP 的 $ POST 变量 实际 上 是 一 个 预定 义 的 关联 数组 , 键 名 对 应 表单 元 素 的 name 属性 值 ， | 


键 值 就 是 value 属性 值 。 | 

【示例 】 在 站 点 根 目录 下 新 建 页 面 ,保存 为 index.html， 设计 一 个 表单 ， 在 其 中 添加 一 个 文本 框 。 | 

设置 method 属性 为 "post"， 以 便 $_POST 变量 能 够 接收 到 数据 ; 设置 表单 的 action 属性 为 request.php， 
定义 提交 数据 的 处 理 程序 ，requestphp 将 接收 数据 并 响应 给 用 户 ， 演 示 效 果 如 图 20.3 所 示 。 


a 
5; 
© |S Er EE MS .everm oo | Sema 


获取 文本 框 的 什 获取 文本 柜 的 入 


欢迎 光临 


外 月 当空 


(a) 提交 表单 (b) 响应 信息 
图 20.3 示例 效果 
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设计 index.html 页 面 的 表单 结构 如 下 。 
<form id="form1" name="forml" method="post" action="request.php"> 
| <label> 用 户 名 <input name="user" type="text" id="user" /></label> 
于 A | <input type="submit" value=" 提 交 数 据 " /> 


</form> 


创建 PHP 程序 处 理 页 面 ， 保 存 为 requestphp。 输 入 如 下 代码 ， 用 来 接收 index html 页 面 提交 的 文 
本 框 的 值 。 
| <div data-role="content"> 
<h1> 欢 迎 光 临 </h1> 
<h2><?php if(isset($_POST["user"])) echo $ POST["user"]; ?></h2> 
</div> 


在 脚本 中 先 使 用 isset0 函 数 判断 一 下 $_POST["user"] 变 量 是 否 存 在 ， 然 后 再 读 取 显 示 。 
， 这 提示 : 获取 表单 数据 ， 实 际 上 就 是 获取 不 同 表单 元 素 的 数据 ，<fonm> 标 签 中 的 name 是 所 有 表单 


元 素 都 必须 要 设置 的 属性 ， 用 来 定义 表单 元 素 的 名 称 ，PHP 程序 通过 name 属性 来 获取 相 
应 的 value 属性 值 。 所 以 ， 在 元 素 命名 时 不 要 重复 ， 以 免 获取 的 数据 出 错 。 


| 在 开发 过 程 中 ， 获 取 文本 框 、 密 码 域 、 隐 藏 域 、 按 钮 、 文 本 区 域 ， 以 及 其 他 HTMLS5 不 同类 型 的 
| 输入 文本 框 的 值 的 方法 是 相同 的 ， 都 是 使 用 name 属性 来 获取 相应 的 value 属性 值 。 


当 多 个 复 选 框 绑 在 一 起 ， 组 成 一 个 复 选 框 组 ， 获 取 它 们 的 值 和 方法 就 略 有 不 同 。 
【示例 】 下 面 示例 将 演示 如 何 快速 获取 复 选 框 组 中 被 选中 的 值 ， 演 示 效 果 如 图 20.4 所 示 。 


获取 复 选 柜 的 什 获取 复 选 柜 的 值 


httpy/localhost3080/request.php 


(a) 提交 表单 (b) 响应 信息 
图 20.4 示例 效果 


| 新 建 index.html 页 面 ， 设 计 一 个 表单 。 先 为 <form> 标 签 设置 action 和 metho 属性 ， 定 义 请 求 文件 
| 为 同 目录 下 的 request.php， 请 求 的 方式 为 POST。 

在 <form> 标 签 内 插入 3 个 复 选 框 和 一 个 提交 按钮 ， 定 义 复 选 框 的 name 属性 值 都 为 interest[]， 而 
”value 属性 值 分 别 为 "体育 "、" 音 乐 " 和 "计算 机 "， 定 义 提交 按钮 的 value 属性 值 为 "提交 数据 "。 完 整 的 
”表单 结构 代码 如 下 所 示 。 
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<form id="form1" name="forml" method="post" action="request.php"> 
<fieldset data-role="controlgroup"> 
<legend> 兴 趣 </legend> 
<label><input name="interest[]" type="checkbox" value=" 体 育 " /> 体育 </label> 
<label><input name="interest[]" type="checkbox" value=" 音 乐 " /> 音乐 </label> 
<label><input name="interest[]" type="checkbox" value=" 计 算 机 " /> 计算 机 </label> | 
</fieldset> 
<input type="submit" value=" 提 交 数 据 " /> Note 
</form> 


痊 提示 : 在 复 选 框 组 和 单 选 按钮 组 中 ， 其 name 属性 值 必须 定义 为 数组 类 型 ， 即 名 称 后 面 要 加 一 本 
中 括号 ， 表 示 该 变量 为 一 个 数组 类 型 ， 这 样 才能 够 存储 多 个 值 。 
创建 xequestphp 程序 处 理 页 面 ， 输 入 如 下 代码 ， 用 来 接收 index html 页 面 提交 的 值 。 


<div data-role="content"> 
<hl> 您 的 兴趣 是 ， </h1> 


<h2><?php 
if( isset($_POST["interest"])){ / 先 检测 用 户 是 否 提交 了 值 
Sinterest = $_POST["interest"]; / 获取 所 有 选项 
if($interest != nulD{ / 检测 是 否 选择 了 项 目 
for($i=0;$i<count($interest);$it+) 人 循环 输出 显示 每 个 选项 值 
echo S$interest[$1]."<br />"; 
} 
} 
?></h2> 
</div> 
瘀 提示 : 使 用 $_POST 变量 获取 复 选 框 组 的 值 时 ， 必 须 设置 name 值 为 "interest"， 而 不 是 "interest[]"， 
否则 将 不 识别 复 选 框 组 的 值 。 


然后 ， 使 用 count0 函 数 计算 5_POST["interest"] 数 组 的 元 素 个 数 ， 使 用 for 循环 语句 逐一 输出 所 有 | 
被 选中 的 复 选 框 的 值 。 


20.2.3 ”获取 下 拉 菜 单 的 值 


获取 下 拉 菜 单 的 值 与 获取 文本 框 的 值 的 方法 完全 相同 。 
【示例 】 下 面 示例 演示 了 如 何 快速 获取 表单 中 下 拉 菜 单 的 选取 值 ， 演 示 效果 如 图 20.5 所 示 。 


EI EEC 本 了 mm 国 国 
获取 下 拉 荣 单 的 值 获取 下 拉 荣 单 的 值 | 


PHP 编 程 兴趣 班 安排 在 周 几 ? 


PHP 编 程 兴 趣 班 安排 


周二 


su 三 


(a) 提交 表单 (b) 响应 信息 
图 20.5 示例 效果 | 
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| 新 建 index.html 页 面 ， 设 计 一 个 表单 。 先 为 <form> 标 签 设置 action 和 metho 属性 ， 定 义 请 求 文 件 
| 为 同 目录 下 的 requestphp， 请 求 的 方式 为 POST。 
在 <form> 标 签 内 插入 一 个 下 拉 菜单 和 一 个 提交 按钮 ， 定 义 下 拉 菜 单 的 name 属性 值 为 interest， 下 
壁 从 | 拉 菜 单 选项 的 value 属性 值 分 别 为 "周一 "、" 周 二 "、" 周 三 "、" 周 四 "、" 周 五 "， 为 了 避免 没有 安排 ， 再 
~ 添加 一 个 空 选项 ， 定 义 提交 按钮 的 value 属性 值 为 "提交 数据 "。 完 整 的 表单 结构 如 下 所 示 。 


Note <div data-role="content"> 


<form id="forml" name="forml" method="post" action="request.php"> 
| <label for="interest">PHP 编程 兴趣 班 安排 在 周 几 ? </label> 
| <select name="interest" id="interest"> 
| <option value=""></option> 
<option value=" 周 一 "> 周一 </option> 
<option value=" 周 二 "> 周二 </option> 
<option value=" 周 三 "> 周三 </option> 
<option value=" 周 四 "> 周 四 </option> 
<option value=" 周 五 "> 周 五 </option> 
</select> 
<input type="submit" value=" 提 交 数 据 " /> 
</form> 
</div> 


| 创建 request.php 程序 处 理 页 面 ， 输 入 如 下 脚本 代码 ， 用 来 接收 index.html 页 面 提交 的 值 。 使 用 站 
| 语句 对 下 拉 菜 单 的 值 进行 判断 ， 最 后 输出 响应 信息 。 


<?php 
iftisset($_POST["interest"])){ / 先 检测 用 户 是 否 提交 了 值 
Sinterest 二 $_POST["interest"]; 。“// 获取 下 拉 菜 单 的 值 
if($interest != nulD{ / 如 果 不 为 空 ， 则 显示 
echo Sinterest; 
} 
elsef / 如 果 为 空 ， 则 特别 提示 
echo "没有 安排 "; 
} 
} 
?> 


20.2.4 获取 列表 框 的 值 


| 如 果 列 表 框 没有 设置 multiple 属性 ， 可 以 采用 20.2.3 节 的 方法 来 获取 值 。 如 果 列 表 框 设置 了 
本 ”multiple 属性 ， 人 允许 多 选 ， 可 以 模仿 复 选 框 组 的 方法 获取 值 。 
| 【示例 】 下 面 示例 演示 如 何 快速 获取 用 户 提交 的 列表 值 ， 并 以 按钮 的 形式 显示 出 来 ， 效 果 如 
| 图 20.6 所 示 。 
新 建 index.html 页 面 ， 设 计 一 个 表单 。 先 为 <form> 标 签 设置 action 和 metho 属性 ， 定 义 请 求 文件 
| 为 同 目录 下 的 requestphp， 请 求 的 方式 为 POST。 
在 <form> 标 签 内 插入 一 个 列表 框 和 一 个 提交 按钮 ， 定 义 列表 框 的 name 属性 值 为 interest]， 添 加 
”multiple 属性 ， 允 许多 选 。 定 义 列表 选项 的 属性 值 分 别 为 "体育 "、" 音 乐 "、" 计 算 机 "和 "英语 "， 定 义 提 


交 按钮 的 value 属性 值 为 "提交 数据 "。 完 整 的 表单 结构 如 下 所 示 。 
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<div class="container"> 
<form id="forml" name="forml" method="post" action="request.php"> 
<label for="interest"> 兴 趣 </labe> 
‘<select name="interest[]" id="interest" size="4" multiple class="form-control"> 
<option value=" 体 育 "> 体育 </option> 
<option value=" 音 乐 "> 音乐 </option> | 
<option value=" 计 算 机 "> 计算 机 </option> Note 
<option value=" 英 语 "> 英语 </option> 
‘</select><br> 
<input type="submit" value=" 提 交 数 据 " class="btn btn-success btn-block" /> 
</form> 
</div> 


; y 


您 的 兴 


件 育 


音乐 


(a) 提交 表单 (b) 响应 信息 
图 20.6 示例 效果 


创建 requestphp 程序 处 理 页 面 ， 输 入 如 下 脚本 代码 ， 用 来 接收 index.html 页 面 提交 的 值 。 使 用 
$_POST["interest"] 读 取 用 户 选择 的 值 ， 使 用 for 语句 循环 输出 所 有 被 选中 的 值 。 
<2php | 
if(isset($_POST["interest"])){ // 先 检测 用 户 是 否 提交 了 值 | 
Sinterest = $_POST["interest"]; | 
这 Sinterest!= nulD{ ”// 判断 列表 框 的 返回 值 是 否 为 空 | 
for($i=0;$i<count($interest);$it+) 。“”// 通过 for 循环 输出 选中 的 列表 框 的 值 
echo '<div class="btn btn-primary">".$interest[$1].'</div>"; 
H 
} 
> 


20.2.5 获取 密码 域 和 隐藏 域 的 值 


获取 密码 域 和 隐藏 域 的 值 的 方法 与 获取 文本 框 的 值 方法 相同 。 
【示例 】 下 面 示例 演示 了 如 何 获取 用 户 提交 的 用 户 名 和 密码 ， 并 根据 隐藏 提交 的 值 进行 适当 提 | 视频 讲解 
示 ， 演 示 效 果 如 图 20.7 所 示 。 | 
新 建 index.html 页 面 ， 设 计 一 个 表单 。 先 为 <form> 标 签 设置 action 和 metho 属性 ， 定义 请 求 文件 
为 同 目录 下 的 requestphp， 请 求 的 方式 为 POST。 | 
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x 


息 localhost 


门 泊 东 吴 ， 您 好 


[ ana BE. +. 
| e00000ee 


你 目前 是 1 讼 用 户 ， 请 继 详 男 力 。 


(a) 提交 表单 (b) 响应 信息 
图 20.7 示例 效果 


| 在 <fomm> 标 签 内 ， 插 入 一 个 文本 框 、 一 个 密码 域 、 一 个 隐藏 域 和 一 个 提交 按钮 ， 定 义 输入 文本 域 
”的 name 属性 值 分 别 为 user、pass、grade; 定义 提交 按钮 的 value 属性 值 为 "提交 数据 "。 


| <div class="container"> 
<form id="forml" name="forml" method="post" action="request.php"> 
<div class="input-group input-group-lg"> 
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> 
<input type="text" name="user" class="form-control" placeholder=" 请 输入 用 户 名 "> 
</div><br> 
<div class="input-group input-group-lg"> 
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> 
<input type="password" name="pass" class="form-control" placeholder=" 请 输入 密码 "> 
</div><br> 
| <input name="grade" type="hidden" value="1" /> 
| <input type="submit" value=" 提 交 数 据 " class="btn btn-success btn-block" /> 
| </form> 
| <div> 


| 创建 request.php 程序 处 理 页 面 ， 输 入 如 下 脚本 代码 ， 用 来 接收 index.html 页 面 提交 的 值 。 使 用 
| $_ POST 方法 在 标签 中 嵌入 从 客户 端 获取 的 输入 域 的 值 。 


<div class="container"> 
<h2><?php echo $_ POST["user"] ?>， 您 好 </h2> 
| <p> 你 的 密码 是 <span class="btn btn-primary"><?php ifisset($_ POST["pass"])) echo $_POST["pass"] ?> 
，</span>， 请 牢记 。</p> 
| <p> 你 目前 是 <code><?php ifisset($_ POST["grade"])) echo $_POST["grade"] ?></code> 级 用 户 ， 请 继 
| 续 努 力 。</p> 
| </div> 


2026 获取 单 选 按钮 的 值 


| 单 选 按钮 虽然 可 以 以 组 的 形式 出 现 ， 有 多 个 可 供 选择 的 值 ， 但 是 在 同一 次 操作 中 只 能 够 选择 一 个 

| 值 ， 所 以 获取 单 选 按钮 值 的 方法 与 获取 文本 框 的 值 方法 相同 。 

| 【示例 】 下 面 示例 为 用 户 提供 一 个 单 选 操作 ， 当 用 户 提交 不 同 的 选项 后 ， 后 台 服 务 器 将 显示 不 同 
」 风格 的 图 片 效果 ， 如 图 20.8 所 示 。 
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YS hocahostso 2 - sc 动人 二 


获取 单 选 技 钮 的 苦 获取 单 选 技 钮 的 什 


选择 外 套 风格 女 款 外 套 


曙 款 让 


(a) 提交 表单 (b) 响应 信息 


图 20.8 示例 效果 


新 建 index.html 页 面 ， 设 计 一 个 表单 。 先 为 <form> 标 签 设置 action 和 metho 属性 ， 定 义 请 求 文件 
为 同 目录 下 的 request.php， 请 求 的 方式 为 POST。 

在 <form> 标 签 内 ,插入 一 个 单 选 按 钮 组 和 一 个 提交 按钮 ， 定 义 单 选 按 钮 组 的 name 属性 值 为 sex， 
选项 的 value 属性 值 分 别 为 "men"、"women"。 完 整 的 表单 结构 如 下 所 示 。 


<div data-role="content"> 
<form id="forml" name="forml" method="post" action="request.php"> 
<fieldset data-role="controlgroup" data-type="horizontal"> 
<legend> 选 择 外 套 风格 </legend> 
<label><input name="sex" type="radio" value="men" checked /> 男 款 </label> 
<label><input name="sex" type="radio" value="women" /> 女 款 </label> 
</fieldset> 
<input type="submit" value=" 提 交 数 据 " 亡 
</form> 
</div> 


创建 request.php 程序 处 理 页 面 ,输入 如 下 脚本 代码 ， 用 来 接收 index.html 页 面 提交 的 值 ， 并 进行 
处 理 ， 根 据 选择 条 件 ， 显 示 不 同 的 图 文 信息 。 


<?php 
ifisset($_POST["sex"])){ / 先 检测 用 户 是 否 提交 了 值 
Sinterest = $_POST["sex"]: 
这 Sinterest =— "men"){ / 判断 用 户 选择 的 值 


echo '<h1> 男 款 外 套 </h1>'; 

echo '<img src="images/3 .jpg" alt=""/>'; 
jelse{ 

echo '<h1> 女 款 外 套 </h1>'; 

echo '<img src="images/2.jpg" alt=""/>"; 


401: 
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20.2.7 获取 文件 域 的 值 


| 使 用 文件 域 ， 可 以 实现 本 地 文件 上 传 到 服务 器 。 文 件 域 有 一 个 特有 的 属性 accept， 用 于 指定 上 传 

| 文件 的 类 型 ， 如 果 要 限制 上 传 文件 的 类 型 ， 则 可 以 设置 该 属性 。 

| 【示例 】 下 面 示例 为 用 户 提供 简单 的 文件 上 传 操作 ， 当 用 户 上 传 文件 后 ， 后 台 服 务 器 将 以 响应 的 
[07 方式 显示 用 户 提交 的 文件 名 ， 如 图 20.9 所 示 。 


到 
€ | ERE Er ”区 区 


获取 文件 域 的 值 


O x 
YS root p- sc| S omrsne ~ 


| 获取 文件 域 的 什 


| | |C'\Users\8\Pictures\86d6277fge2f07083e861effe824b899a 浏览 


你 上 传 的 文件 是 ，86d6277f9e2107083e861effe824b899a801f249 jpg 


© 提交 数据 


(a) 提交 表单 (b) 响应 信息 

| 图 20.9 示例 效果 
| 新 建 index.html 页 面 ， 设 计 一 个 表单 。 先 为 <form> 标 签 设置 action 和 metho 属性 ， 定 义 请 求 文件 
| 为 同 目录 下 的 requestphp， 请 求 的 方式 为 POST。 
| 在 <fomm> 标 签 内 ， 插 入 一 个 文件 域 和 一 个 提交 按钮 ， 定 义 文件 域 的 name 属性 值 为 锯 e， 提 交 按 
| 钮 的 value 属性 值 为 "提交 数据 "。 设 计 完 整 的 表单 结构 如 下 所 示 。 
| <form action="request.php" data-ajax="false" method="post" name="forml" id="forml"> 

<label> 选 择 照片 

<input name="file" type="file" /> 

</label> 

| <input type="submit" data-theme="e" data-icon="check" value=" 提 交 数 据 " /> 
</form> 

| 创建 request.php 程序 处 理 页 面 ， 输 入 如 下 脚本 代码 ， 用 来 接收 index.html 页 面 提 交 的 值 ， 并 进行 
| 处理， 显示 用 户 提交 的 文件 信息 。 
ifisset($_POST["file"])){ / 先 检测 用 户 是 否 上 传 了 文件 

Sfile =$ POST["file"]; 

echo "你 上 传 的 文件 是 :"; 

echo $file ; / 显示 文件 信息 


肉 提示 : $_FILES 预定 义 变量 是 一 个 关键 数组 ， 包 含 上 传 文件 的 所 有 信息 ， 具 体 说 明 如 下 ， 其 中 
mserfile' 是 name 的 属性 值 ， 表 示 文件 域 的 名 称 。 
$_FILES[mserfile][mame']: 文件 的 原名 称 。 
回 $FILES[muserfile][type]: 文件 的 MIME 类 型 ， 如 image/gif。 
$_FILES[mserfile]['size]: 文件 的 大 小 ， 单 位 为 字 节 。 
回 $FILES[userfile][tmp name']: 临时 存储 的 文件 名 。 
$ FILES[userfile]['error]: 和 该 文件 上 传 相关 的 错误 代码 。 
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文件 被 上 传 后 ， 默 认 会 被 储存 到 服务 端的 默认 临时 目录 中 ， 可 以 在 phpini 中 的 upload tmp dir | 
设置 存储 路 径 。 当 然 ， 一 般 还 需要 读 取 临 时 存储 文件 ， 并 另存 到 指定 目录 中 才 可 以 有 效 。 


20.3 在 线 练 习 


本 节 为 课 后 练习 ， 感 兴趣 的 同学 请 扫 码 进一步 强化 训练 。 
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Cookie 和 Session 


Cookie 和 Session 是 两 种 不 同 的 会 话机 制 ， 网 站 可 以 根据 会 话 记 录 跟踪 用 户 的 行为 。 例 
如 ， 当 在 某 购物 网 站 上 选 购 商品 时 ， 需 要 在 多 个 页 面 之 间 来 回 切 换 ， 不同 页 面 都 可 以 显示 与 
用 户 关 联 的 信息 。 这 种 在 网 站 中 跟踪 一 个 用 户 ， 可 以 处 理 同一 个 用 户 在 不 同 页 面 的 信息 ， 就 
是 使 用 会 话机 制 来 完成 的 。 本 章 将 重点 介绍 Cookie 和 Session 会 话 的 使 用 方法 和 技巧 。 


【 学 习 重 点 】 

WI 了解、 创建 Cookie 

读 写 、 删 除 Cookie 

了 解 Session 

启动 Session、 注 册 Session 
使 用 Session、 删 除 Session 


至 吾 吾 吾 
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21.1 使 用 Cookie 


本 节 将 介绍 什么 是 Cookie， 为 什么 要 使 用 Cookie， 以 及 如 何 使 用 Cookie 等 问题 。 
21.1.1 认识 Cookie 


Cookie 是 存储 在 客户 端 计算 机 中 的 一 个 文本 文件 ， 包 含 一 组 字符 串 。 当 用 户 访问 网 站 时 ，PHP | 
会 在 用 户 的 计算 机 上 创建 一 个 文本 文件 ， 把 用 户 信息 保存 其 中 ， 作 为 持续 跟踪 用 户 的 一 种 方式 。 | 
Cookie 信息 一 般 不 加 密 ， 存 在 泄露 风险 。 为 了 防止 类 似 的 问题 ，Cookie 设置 了 一 套 机 制 只 允许 
客户 端 Cookie 被 创建 它 的 域 读 写 , 其 他 浏览 器 或 网 站 都 无 法 读 写 Cookie 文件 。 例如 ,www.baidu.com | 
只 能 访问 baidu.com 创建 的 Cookie。 | 
所 有 Cookie 都 被 存放 在 客户 端 临时 文件 夹 中 ， 存 放 Cookie 的 文本 文件 命名 规则 如 下 。 


用 户 名 @ 网 站 名 .txt 


例如 ， 访 问 百度 网 站 之 后 ， 就 会 在 Cookies 目录 下 发 现 user_name(@baidu[1].txt 的 文本 文件 。 有 些 文 | 
件 可 能 会 使 用 他 地 址 来 描述 网 站 ， 如 user_ name@220.1518.60.111[1] txt。 这 些 文件 可 以 被 任何 文本 编 | 
辑 器 打开 ， 显 示 类 似 如 图 21.1 所 示 的 一 长 串 字 符 串 。 | 
Cookie 文件 是 临时 文件 ， 在 默认 情况 下 ， 当 用 户 EECEECEORTO EE 
离开 网 站 时 就 被 自动 删除 。 可 以 通过 脚本 设置 ， 让 一 让 
些 文件 长 久保 存 ， 当 用 户 再 次 访问 站 点 时 ， 可 以 继续 
进行 读 取 操作 。 


21.1.2 创建 Cookie 图 21.1 Cookie 文本 文件 
在 PHP 中 可 以 使 用 setcookieO 函 数 创建 Cookie。 使 用 setcookie0 函 数 的 前 提 是 客户 端 浏览 器 支持 

Cookie， 如 果 浏 览 器 禁用 Cookie，setcookie0 函 数 将 返回 false， 有 具体 用 法 如 下 所 示 。 | 
setcookie(name,value,expire,path,domain,secure) 


setcookie0 函 数 向 客户 端 发 送 一 个 HTTP cookie。 如 果 成 功 ， 则 该 函数 返回 we， 否 则 返回 false， 如 
表 21.1 所 示 。 


表 21.1 setcookie() 函 数 参 数 说 明 


参数 说 了 明 
name | 必需 。 定 义 cookie 的 名 称 
value 必需 。 定 义 cookie 的 值 
expire 可 选 。 定 义 cookie 的 有 效 期 
ath 可 选 。 定 义 cookie 的 服务 器 路 径 
domain 可 选 。 定 义 cookie 的 域名 
secure 可 选 。 定 义 是 否 通过 安全 的 HTTPS 连接 来 传输 cookie 


< 注意 : Cookie 是 HTTP 头 标的 组 成 部 分 ， 而 头 标 必须 在 页 面 其 他 内 容 之 前 发 送 ， 因 此 它 必须 最 
先 输出 。 如 果 在 setcookie0 函 数 前 输出 一 个 HTML 标记 、echo 语句 ， 甚 至 一 个 空 行 都 会 导 
致 程序 出 错 。 
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【示例 1】 下 面 示例 演示 了 如 何 设置 并 发 送 cookie。 


<?php 

Svalue = "my cookie value"; 

// 发 送 一 个 简单 的 cookie 
setcookie("TestCookie",$value); 
?> 


在 发 送 cookie 时 , cookie 的 值 会 自动 进行 URL 编码 。 接 收 时 会 进行 URL 解码 。 如果 不 需要 这 样 ， 


可 以 使 用 setrawcookie0 函 数 进行 代替 。 


【示例 2】 下 面 示例 将 设置 一 个 24 小 时 有 效 期 的 cookie。 


<?php 

$value = "my cookie value"; 

// 发 送 一 个 24 小 时 过 期 的 cookie 
setcookie("TestCookie",$value, time(+3600*24); 
?> 


【示例 3】 如 果 要 把 cookie 保存 为 浏览 器 进程 ， 即 浏览 器 关闭 后 就 失效 。 那 么 可 以 直接 把 expiretime 


| 设 为 0， 代 码 如 下 所 示 。 


<?php 

$value = "my cookie value"; 

// 发 送 一 个 关闭 浏览 器 即 失效 的 cookie 
setcookie("TestCookie",$value, 0); 

?> 


参数 path 表示 Web 服务 器 上 的 目录 ， 默 认为 被 调用 页 面 所 在 目录 ， 这 里 还 有 一 点 要 说 明 的， 如 


| 果 网 站 有 几 个 不 同 的 目录 ， 如 一 个 购物 目录 、 一 个 论坛 目录 等 ， 那 么 如 果 只 用 不 带路 径 的 Cookie 的 
| 话 ， 在 一 个 目录 下 的 页 面 里 设 的 Cookie 在 另 一 个 目录 的 页 面 里 是 看 不 到 的 ， 也 就 是 说 ，Cookie 是 面 
| 向 路 径 的 。 实 际 上 ， 即 使 没有 指定 路 径 ，Web 服务 器 也 会 自动 传递 当前 的 路 径 给 浏览 器 ， 指 定 路 径 会 
| 强制 服务 器 使 用 设置 的 路 径 。 


解决 这 个 问题 的 办 法 是 在 调用 setcookie0 函 数 时 加 上 路 径 和 域名 ,域名 的 格式 可 以 是 


http://www.phpuser.com/， 也 可 以 是 .phpuser.com。 


参数 domain 可 以 使 用 的 域名 ， 默 认为 被 调用 页 面 的 域名 。 这 个 域名 必须 包含 两 个 ""， 所 以 如 果 


指定 顶级 域名 ， 则 必须 使 用 ".mydomain.com"。 设 定 域名 后 ， 必 须 采 用 该 域名 访问 网 站 cookie 才 有 效 。 
如 果 使 用 多 个 域名 访问 该 页 ， 那 么 这 个 地 方 可 以 为 空 或 者 访问 这 个 cookie 的 域名 都 是 一 个 域 下 面 的 。 


参数 secure 如 果 设 为 "1"， 表 示 cookie 只 能 被 用 户 的 浏览 器 认为 是 安全 的 服务 器 所 记 住 。 


< 注意 : value、 path、domain 3 个 参数 可 以 用 空 字符 囊 " 代 换 ， 表 示 没 有 设置 。expire 和 secure 两 


个 参数 是 数值 型 的 , 可 以 用 0 表示 。expire 参数 是 一 个 标准 的 Unix 时 间 标记 , 可 以 用 timeO 
或 mktime0 函 数 取得 ， 以 秒 为 单位 。secure 参数 表示 这 个 Cookie 是 否 通过 加 密 的 HTTPS 
协议 在 网 络 上 传输 。 


secure 参数 如 果 设 为 1, 则 表示 cookie 只 能 被 HITPS 协议 所 使 用 , 任何 脚本 语言 都 不 能 获取 PHP 


当前 设置 的 Cookie 不 是 立即 生效 的 ， 而 是 要 等 到 下 一 个 页 面 或 刷新 后 才能 看 到 。 这 是 由 于 在 设 


， 置 的 这 个 页 面 里 Cookie 由 服务 器 传递 给 客户 浏览 器 ， 在 下 一 个 页 面 或 刷新 后 浏览 器 才能 把 Cookie 从 
， 客户 的 机 器 里 取出 传 回 服务 器 的 原因 。 
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21.1.3 读 取 Cookie 


在 PHP 中 可 以 使 用 5 COOKIE 预定 义 变量 读 取 Cookie 值 。 视频 讲 角 
【示例 】 在 下 面 示例 中 ， 首 先 检测 Cookie 文件 是 否 存在 ， 如 果 不 存 在 ， 则 新 建 一 个 Cookie; 如 ， | 其 
果 存 在 ， 则 读 取 Cookie 值 ， 并 显示 用 户 上 次 访问 时 间 ， 演 示 效 果 如 图 21.2 所 示 。 


| vote 

<2php | 
ifl!isset($_COOKIE["vtime"]){ // 如 果 Cookie 不 存在 | 

setcookie("vtime",date("y-m-d H:i:s")); // 设置 一 个 Cookie 变量 

echo "第 一 次 访问 "."<br>"; // 输出 字符 串 
Yelse{ // 如 果 Cookie 存在 

echo "上 次 访问 时 间 为 :".$_COOKIE["vtime"]; / 输出 上 次 访问 网 站 的 时 间 

echo "<br>"; 

setcookie("vtime",date("y-m-d H:i:s"),time()+60); // 设置 带 Cookie 失效 时 间 的 变量 
} 
echo "本 次 访问 时 间 为 : ".date("y-m-d H:i:s"); / 输出 当前 的 访问 时 间 
?> 


上 次 访问 时 间 为 ，1 
本 次 访问 时 间 为 。 17-02- 3 


图 21.2 读 取 Cookie 信息 

21.1.4 删除 Cookie | 

创建 Cookie 之 后 ， 如 果 没 有 设置 失效 时 间 ， 在 关闭 浏览 器 时 会 被 自动 删除 ， 如 果 在 关闭 浏览 器 加 

之 前 删除 Cookie， 可 以 有 两 种 方法 。 | 
1. 使 用 setcookie0 函 数 
使 用 setcookie0 函 数 删除 ， 只 要 将 该 函数 的 第 二 个 参数 设置 为 空 ， 将 第 三 个 参数 设置 为 小 于 当前 | 


系统 时 间 即 可 。 
【示例 】 将 Cookie 的 失效 时 间 设 置 为 当前 时 间 减 1 秒 。 


setcookie("vime","",date("y-m-d H:i:s"),time(-1); 


在 上 面 代码 中 ，timeO 函 数 返 回 以 秒表 示 的 当前 时 间 ， 把 当前 时 间 减 1 秒 就 会 得 到 过 去 的 时 间 ， 
从 而 删除 Cookie。 


4 注意 ;如果 把 第 三 个 参数 设置 为 0， 则 表示 直接 删除 Cookie 值 。 


2. 手动 清除 


使 用 Cookie 时 ，Cookie 自动 生成 一 个 文本 文件 存储 在 正 浏览 器 的 Cookies 临时 文件 夹 中 。 人 

览 器 中 删除 Cookie 文件 是 一 种 非常 便捷 的 方法 ， 具 体操 作 步 又 如 下 。 | 
(1) 启动 正 浏 览 | 
(2) 在 菜单 栏 中 ， 选择 工具 ”一 “Internet 选项 ”命令 ， 打 开 “Internet 选项 ”对 话 框 ， 如 | 
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| 图 21.3 所 示 。 
3) 在 “常规 ”选项 卡 中 ， 单 击 “ 删 除 ” 按钮， 打开“ 删除 浏览 历史 记录 ”对 话 框 ， 如 图 21.4 
”所 示 。 在 其 中 选中 “Cookie 和 网 站 数据 ” 复 选 框 。 

(4) 最 后 ， 在 对 话 框 底部 单 击 “删除 ”按钮 即 可 。 


回 保 和 下 间 严 网 站 获 吴 (R) 
保 里 Cookie 和 Internet 临时 文件 ,以 评 你 收 划 的 网 站 能 金保 存 仿 好 选项 并 
和 高 显示 这 度 , 


3 
从 基 要 创 寻 多 个 主页 项 卡 ， 请 在 每 生 姥 入 一 个 地 址 Rj。 


tpy /rebaidu.com/] 


C0 
后 
从 by 全 洒 中 的 班机 HB) 
国人 
迁 而 卡 
更 玉 网 页 二 项 上 中 的 显示 方式. RE 
训 六 历史 忆 录 
时 文件 、 历 记录 ，Cockie、 恒 和 的 过 码 和 网 页 音信 息 。 
口 Btmy 和 了 中 历史 条 
SOO) 
回 ActiveX 
i 


矫 选 和 力 夭 保护 数据 (IO 
,这 迁 中 排除 的 网 站 列表 , 以 及 中 踪 保护 用 来 检测 网 站 在 何 处 自动 共享 你 沪 
同 站 详 鲁 信 息 的 数据 , 


图 21.3 “Intemet 选项 ”对 话 框 图 21.4 “删除 浏览 历史 记录 ”对 话 框 


四 2115 Cookie 的 生命 周期 


加 | 如果 不 设 定 失效 时 间 ， 表 示 Cookie 的 生命 周期 就 为 浏览 器 会 话 期 ， 只 要 关闭 浏览 器 ，Cookie 就 
视频 讲解 | 会 自动 消失 ， 这 种 Cookie 被 称 为 会 话 Cookie， 一 般 不 保存 在 硬盘 上 ， 而 是 保存 在 内 存 中 。 
| 如果 设置 了 失效 时 间 ， 那 么 浏览 器 会 把 Cookie 保存 到 硬盘 中 ， 再 次 打开 浏览 器 时 会 依然 有 效 ， 
”直到 它 的 有 效 期 超时 。 
| 虽然 Cookie 可 以 长 期 保存 在 客户 端 浏览 器 中 ， 但 也 不 是 一 成 不 变 的 。 因 为 浏览 器 最 多 允许 存储 
”300 个 Cookie 文件 ， 而 且 每 个 Cookie 文件 支持 最 大 容量 为 4KB。 每 个 域名 最 多 支持 20 个 Cookie， 
， 如果 达 到 限制 时 ， 浏 览 器 会 自动 地 、 随 机 地 删除 Cookie 文件 。 


21.2 使 用 Session 
| Session 会 话 保存 的 数据 在 PHP 中 是 以 变量 的 形式 存在 的 ， 创 建 的 会 话 变量 在 生命 周期 中 可 以 跨 
| 页 引用 。 由 于 Session 会 话 是 存储 在 服务 器 端的 ， 相 对 安全 ， 也 没有 存储 长 度 的 限制 。 
21.2.1 认识 Session 


Session 表示 会 话 的 意思 ， 在 PHP 中 Session 代表 服务 器 与 客户 端 之 间 的 一 个 会 话 。 它 从 用 户 单 
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运行 。 


用 户 建 立 独立 的 Session 对 象 ，Session 对 象 通 过 session id 属性 进行 标识 ， 每 一 次 会 话 都 会 生成 一 个 
永 不 重复 的 随机 值 。 用 户 在 网 站 内 只 能 访问 自己 的 Session， 而 不 能 访问 其 他 用 户 的 Session 。 


为 购物 车 ， 记 录 已 选 购 的 每 件 商品 及 相关 信息 。 


Session 适合 存储 少量 信息 ， 不 能 长 期 存储 。 如 果 要 长 期 存储 ， 建 议 把 Session 信息 存储 到 服务 器 | 


端的 文件 或 数据 库 中 。 
21.2.2 ”启动 会 话 


创建 一 个 会 话 可 以 通过 下 面 几 步 实现 。 
(1) 启动 会 话 。 
(2) 注册 会 话 。 
(3) 使 用 会 话 。 
(4) 删除 会 话 。 


启动 PHP 会 话 的 方式 有 两 种 : 一 种 方式 是 使 用 session_start0 函 数 ， 另 一 种 方式 是 使 用 


session_register() 函 数 为 会 话 创建 一 个 变量 来 启动 会 话 。 通常 , session_start0 函 数 在 页 面 开始 位 置 调 
然后 会 话 变量 被 登录 到 $_SESSION。 


在 PHP 配置 文件 (php.ini) 中 ， 有 一 组 与 Session 相关 的 配置 选项 。 通 过 对 一 些 选项 重新 设置 新 | 


值 ， 就 可 以 对 Session 进行 配置 ， 否 则 使 用 默认 的 Session 配置 。 
1. 使 用 session_start0 函 数 


Session 的 设置 不 同 于 Cookie, 必须 先 启动 , 在 PHP 中 必须 调用 session_start0 函 数 , 以 便 让 PHP | 
核心 程序 ， 将 与 Session 相关 的 内 建 环境 变 量 预 先 载 入 内 存 中 。session_start0 函 数 的 语法 格式 如 下 | 


所 示 。 
Bool session start( void ) // 创建 Session， 开 始 一 个 会 话 ， 进 行 Session 初始 化 


函数 Session_start0 有 两 个 作用 : 一 是 开始 一 个 会 话 ， 二 是 返回 已 经 存在 的 会 话 。 这 个 函数 没有 | 


参数 且 返 回 值 均 为 tue。 


如 果 使 用 基于 Cookie 的 Session， 在 使 用 该 函数 开启 Session 之 前 ， 不 能 有 任何 输出 的 内 容 。 因 
为 基于 Cookie 的 Session 是 在 开启 时 ， 调 用 session_start0 函 数 会 生成 一 个 唯一 的 Session ID， 需 要 保 | 


存在 客户 端 电脑 的 Cookie 中 。 


与 setCookie0 函 数 一 样 , 调用 之 前 不 能 有 任何 的 输出 , 空格 或 空 行 也 不 行 。 如 果 已 经 开启 Session， 
再 次 调用 session_start() 函 数 时 ， 不 会 再 创建 一 个 新 的 Session ID 。 因 为 当 用 户 再 次 访问 服务 器 时 ， 该 
函数 会 通过 从 客户 端 携带 过 来 的 Session ID， 返 回 已 经 存在 的 Session。 所 以 在 会 话 期 间 ， 同 一 个 用 户 | 


在 访问 服务 器 上 任何 一 个 页 面 时 ， 都 是 使 用 同一 个 Session ID 。 


如 果 不 想 在 每 个 脚本 都 使 用 session_start0 函 数 来 开启 Session， 可 以 在 php.ini 里 设置 “session. 
auto_start=1”, 则 无 须 每 次 使 用 Session 之 前 都 要 调用 session_startO 函 数 。 但 启用 该 选项 也 有 一 些 限 制 ， | 
则 不 能 将 对 象 放 入 Session 中 ， 因 为 类 定义 必须 在 启动 Session 之 前 加 载 。 所 以 不 建议 使 用 php.ini 中 | 


的 session.auto_start 属性 来 开启 Session。 
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击 进入 站 点 开始 ， 到 用 户 离开 网 站 结束 。 也 可 以 使 用 PHP 提前 、 主 动 结束 会 话 ， 终止 Session 对 象 的 


Session 会 话 具 有 针对 性 ， 不 同 的 用 户 拥有 不 同 的 会 话 。 一 旦 进入 网 站 ，PHP 都 会 自动 为 每 一 个 | 


使 用 Session 可 以 存储 用 户 信息 ， 如 用 户 姓 名 、 访 问 时 间 、 访 问 页 面 ， 以 及 每 个 页 面 的 停留 时 间 
等 ， 通 过 这 些 基本 信息 能 够 统计 出 用 户 的 浏览 习惯 、 个 人 爱好 等 。 在 购物 时 ， 也 可 以 利用 Session 作 | 
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2. 使 用 session register0 函 数 
| session_register() 函 数 用 来 为 会 话 创建 一 个 变量 ， 并 启动 会 话 ， 但 要 求 设置 php.ini 文件 的 选项 ， 
| 即将 register_globals 指令 设置 为 on， 然后 重新 启动 Apache 服务 器 即 可 。 
| 使 用 session register() 函 数 时 ， 不 需要 调用 session_ start0 函 数 ，PHP 会 在 创建 变量 之 后 调用 
， session start() 函 数 。 


| 21.2.3 ”注册 和 读 取 会 话 


在 PHP 中 使 用 Session 变量 ， 除 了 必须 要 启动 之 外 ， 还 要 经 过 注册 的 过 程 。 注 册 和 读 取 Session 
变量 ， 都 要 通过 访问 $_SESSION 数组 完成 。 

| 自 PHP 6.1.0 起 ，$_SESSION 如 同 $_ POST、$_GET 或 9_COOKIE 等 一 样 成 为 超级 全 局 数组 ， 但 

| 必须 在 调用 session_start0 函 数 开 启 Session 之 后 才能 使 用 。 与 HTTP_SESSION_VARS 不 同 ， 

| $_SESSION 总 是 具有 全 局 范围 ， 因 此 不 要 对 $_SESSION 使 用 global 关键 字 。 在 $_SESSION 关联 数组 

中 的 键 名 具有 和 PHP 中 普通 变量 名 相同 的 命名 规则 。 

| 【示例 】 注 册 Session 变量 代码 如 下 所 示 。 


<?php 

session_start(); // 启动 Session 并 初始 化 
$_SESSION["username"]="skygao"; // 注册 Session 变量 ， 赋 值 为 一 个 用 户 的 名 称 
$_SESSION["password"]="123456"; // 注册 Session 变量 ， 赋 值 为 一 个 用 户 的 密码 
> 


| 执行 该 脚本 后 , 两 个 Session 变量 就 会 被 保存 在 服务 器 端的 某 个 文件 中 。 该 文件 的 位 置 是 通过 php.ini 
| 文件， 在 session.save_path 属性 指定 的 目录 下 ， 为 这 个 访问 用 户 单独 创建 的 一 个 文件 ， 用 来 保存 注册 的 
| Session 变量 。 例 如 ， 某 个 保存 Session 变量 的 文件 名 为 sess_ 040958e2514bf112d61a03ab8adc8c74， 文 件 
”名 中 含 Session ID， 所 以 每 个 访问 用 户 在 服 器 中 都 有 自己 的 保存 Session 变量 的 文件 ， 而 且 这 个 文件 
| 可 以 直接 使 用 文本 编辑 器 打开 。 该 文件 的 内 容 结 构 如 下 所 示 。 

| 变量 名 | 类 型 :长 度 : 值 ; / 每 个 变量 都 使 用 相同 的 结构 保存 

| 本 例 在 Session 中 注册 了 两 个 变量 , 如 果 在 服务 器 中 找到 为 该 用 户 保存 Session 变量 的 文件 , 打开 
| 后 可 以 看 到 如 下 内 容 。 

| username|s:6:"skygao":password|s:6:"123456"; / 保存 某 用 户 Session 中 注册 的 两 个 变量 内 容 


21.2.4 注销 和 销毁 会 话 
当 完成 一 个 会 话 后 ， 可 以 删除 Session 变量 ， 也 可 以 将 其 销毁 。 如 果 用 户 想 退 出 网 站 ， 就 需要 提 


供 一 个 注销 的 功能 ， 把 所 有 信息 在 服务 器 中 销毁 。 
| 可 以 调用 session_destroy0 函 数 结束 当前 的 会 话 ， 并 清空 会 话 中 的 所 有 资源 ， 该 函数 的 语法 格式 


”如 下 所 示 。 

| UUSEE /销毁 和 当前 Session 有 关 的 所 有 资料 

| 相对 于 session_start0) 函 数 ， 该 函数 用 来 关闭 Session 的 运作 ， 如 果 成 功 则 传 回 tue， 销 毁 Session 
| 资料 失败 则 返回 false。 


该 函数 并 不 会 释放 和 当前 Session 相关 的 变量 , 也 不 会 删除 保存 在 客户 端 Cookie 中 的 Session ID。 
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中 注册 的 单个 变量 ， 如 下 所 示 。 
unset($_ SESSION["username'"]); / 删除 在 Session 中 注册 的 用 户 名 变量 
unset($_SESSION["passwrod"]); / 删除 在 Session 中 注册 的 用 户 密码 变量 
深 提示 : 不 要 使 用 unset($_SESSION) 删 除 整个 $_ SESSION 数组 ， 这 样 将 不 能 再 通过 $_ SESSION 本 
局 数组 注册 变量 了 。 但 如 果 想 把 某 个 用 户 在 Session 中 注册 的 所 有 变量 都 删除 ， 可 以 | 
将 数组 变量 $ SESSION 赋 上 一 个 空 数 组 ， 如 下 所 示 。 


$_SESSION=array(); / 将 某 个 用 户 在 Session 中 注册 的 变量 全 部 清除 


PHP 默认 的 Session 是 基于 Cookie 的 ，Session ID 被 服务 器 存储 在 客户 端的 Cookie 中 , 所 以 在 注 ， 


销 Session 时 也 需要 清除 Cookie 中 保存 的 Session ID， 而 这 就 必须 借助 setCookie0 函 数 完成 。 
【示例 】 清 除 客户 端 Cookie 中 保存 的 会 话 信息 。 
在 Cookie 中 ， 保 存 Session ID 的 Cookie 标识 名 称 就 是 Session 的 名 称 ， 这 个 名 称 在 php.ini 中 ， 


因为 $ SESSION 数组 和 自 定义 的 数组 在 使 用 上 是 相同 的 ， 不 过 可 以 使 用 unset0 函 数 来 释放 在 Session 


通过 session name 属性 指定 的 值 。 在 PHP 脚本 中 ， 可 以 通过 调用 session_name0 〇 函数 获取 Session 名 


称 。 删 除 保存 在 客户 端 Cookie 中 的 Session ID， 代 码 如 下 所 示 。 


<?php 
if(isset($ COOKIE[session nameO])) { / 判断 Cookie 中 是 否 保存 Session ID 
setcookie(session_name(), ", time()-3600, /); ”// 删除 包含 Session ID 的 Cookie 
} 
> 


通过 前 面 的 介绍 可 以 总 结 出 来 ，Session 的 注销 过 程 共 需 要 4 个 步 又。 在 下 面 的 脚本 文件 
destroyphp 中 ， 提 供 完整 的 4 个 步骤 代码 ， 运 行 该 脚本 就 可 以 关闭 Session 并 销毁 与 本 次 会 话 有 关 的 | 


所 有 资源 ， 代 码 如 下 所 示 。 


<?php 
1/ 第 一 步 : 开启 Session 并 初始 化 
session start():; 
/ 第 二 步 : 删除 所 有 Session 的 变量 ， 也 可 用 unset($_SESSION[xxx]) 逐 个 删除 
$_SESSION = array0): 
// 第 三 步 ， 如 果 使 用 基于 Cookie 的 Session， 使 用 setCooike0 删 除 包含 Session Id 的 Cookie 
if (isset($_COOKIE[session name()])) { 
setcookie(session_name(), ", time()-42000, "/"); 


} 

// 第 四 步 : 最 后 彻底 销毁 Session 
session _destroy(: 

?> 


21.2.5 ”传递 会 话 


使 用 Session 跟踪 一 个 用 户 , 是 通过 在 各 个 页 面 之 间 传 递 唯一 的 Session ID, 并 通过 Session ID 提 
取 这 个 用 户 在 服务 器 中 保存 的 Session 变量 。 常 见 的 Session ID 传送 方法 有 以 下 两 种 。 
加 ”基于 Cookie 的 方式 传递 Session ID， 这 种 方法 更 优化 , 但 由 于 不 总 是 可 用 的 ， 因 为 用 户 a 
户 端 可 以 屏蔽 Cookie。 
回 ”通过 URL 参数 进行 传递 ， 直 接 将 会 话 ID 嵌入 URL 中 。 
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| 视频 讲解 


| session_ id0 函 数 时 提供 参数 设 定 当前 Session ID。 


a 网 交 设计 与 网 站 建设 从 入 门 到 精通 (和 课业 编 夺 ) 


在 Session 的 实现 中 通常 都 是 采用 基于 Cookie 的 方式 ,客户 端 保存 的 SessionID 就 是 一 个 Cookie。 


， 当 客户 禁用 Cookie 时 ,Session ID 就 不 能 再 在 Cookie 中 保存 , 也 就 不 能 在 页 面 之 间 传递 , 此 时 Session 
”失效 .不 过 PHPS 在 Linux 平台 可 以 自动 检查 Cookie 状态 ,如 果 客户 端 将 它 禁用 , 则 系统 自动 把 Session 
| ID 附加 到 URL 上 传送 。 而 使 用 Windows 系统 作为 Web 服务 器 则 无 此 功能 。 


1. 通过 Cookie 传递 Session ID 
如 果 客 户 端 没有 禁用 Cookie， 则 在 PHP 脚本 中 通过 session_start0 函 数 进行 初始 化 后 ， 服 务 器 会 


自动 发 送 HTTP 标 头 将 Session ID 保存 到 客户 端 电脑 的 Cookie 中 ， 类 似 于 下 面 的 设置 方式 。 


setCookie(session name(), session id(), 0, '/") // 虚拟 向 Cookie 中 设置 Session ID 的 过 程 
在 第 一 个 参数 中 调用 session_ name0) 函 数 ， 返 回 当前 Session 的 名 称 作为 Cookie 的 标识 名 称 。 


Session 名 称 的 默认 值 为 PHPSESSID， 是 在 php.ini 文件 中 由 session.name 选项 指定 的 值 ， 也 可 以 在 调 
用 session_name0 函 数 时 提供 参数 改变 当前 Session 的 名 称 。 


在 第 二 个 参数 中 调用 session_id0 函 数 ， 返 回 当前 Session ID 作为 Cookie 的 值 ， 也 可 以 通过 调用 


第 三 个 参数 的 值 0, 是 通过 在 php.ini 文件 中 由 session.cookie_ lifetime 选项 设置 的 值 。 默认 值 为 0， 


| 表示 Session ID 将 在 客户 机 的 Cookie 中 延续 到 浏览 器 关闭 。 


最 后 一 个 参数 /， 也 是 通过 PHP 配置 文件 指定 的 值 ， 在 php.ini 中 由 session.cookie_path 选项 设置 


的 值 。 默 认 值 为 0/， 表 示 在 Cookie 中 要 设置 的 路 径 在 整个 域内 都 有 效 。 


如 果 服 务 器 成 功 把 Session ID 保存 在 客户 端的 Cookie 中 ， 当 用 户 再 次 请 求 服务 器 时 ， 就 会 把 


| Session ID 发 送 回来 .所 以 当 在 脚本 中 再 次 使 用 session_start0 函 数 时 ,就 会 根据 Cookie 中 的 Session ID 
| 返回 已 经 存在 的 Session。 


2. 通过 URL 传递 Session ID 
如 果 客 户 浏览 器 支持 Cookie， 就 把 Session ID 作为 Cookie 保存 在 浏览 器 中 。 但 如 果 客 户 端 禁 止 


| Cookie 的 使 用 , 浏览 器 中 就 不 存在 作为 Cookie 的 Session ID, 因此 在 客户 请 求 中 不 包含 Cookie 信息 。 

| 如 果 调 用 session_start0 函 数 时 , 无 法 从 客户 端 浏览 器 中 取得 作为 Cookie 的 Session ID， 则 又 创建 了 一 

| 个 新 的 Session ID, 也 就 无 法 跟踪 客户 状态 ,因此 ,每 次 客户 请 求 支持 Session 的 PHP 脚本 ,session_startO 
函数 在 开启 Session 时 都 会 创建 一 个 新 的 Session， 这 样 就 失去 了 跟踪 用 户 状态 的 功能 。 


在 PHP 中 提出 了 跟踪 Session 的 另 一 种 机 制 ， 如果 客户 浏览 器 不 支持 Cookie, PHP 则 可 以 重 写 客 


户 请 求 的 URL， 把 SessionID 添加 到 URL 信息 中 。 可 以 手动 地 在 每 个 超 链接 的 URL 中 都 添加 一 个 
| Session ID， 如 下 所 示 。 


<?php 

session start(); 

echo '<a href="demo.php?'.session_name().='.session_id()."> 链 接 演 示 </a>'; 
?> 


【示例 】 下 例 中 使 用 两 个 脚本 程序 ， 演 示 了 Session ID 的 传送 方法 。 在 第 一 个 脚本 testl.php 中 ， 


输出 链接 时 将 SID 常量 附加 到 URL 上 ， 并 将 一 个 用 户 名 通过 Session 传递 给 目标 页 面 输出 ， 如 下 


所 示 。 

< 
session start(); / 开启 Session 
$_SESSION["username"]="admin"; / 注册 一 个 Session 变量 ， 保 存 用 户 名 
echo "Session ID: ".session id0."<br>": / 在 当前 页 面 输出 Session ID 
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| 
> 
<a hre 全 "test2.php?<?php echo SID ?>"> 通 过 URL 传递 Session ID</a> <!-- 在 URL 中 附加 SID --> 


在 脚本 test2.php 中 ， 输 出 testl.php 脚本 在 Session 变量 中 保存 的 一 个 用 户 名 。 又 在 该 页 面 中 输出 
一 次 Session ID, 通过 对 比 可 以 判断 两 个 脚本 是 否 使 用 同一 个 Session ID。 另 外 , 在 开启 或 关闭 Cookie 
时 ， 注 意 浏览 器 址 栏 中 URL 的 变化 ， 代 码 如 下 所 示 。 


<?php 

Session start(); 1/ 开启 Session 

echo $_ SESSION["usemame"]."<br>"; // 输出 Session 变量 的 值 
echo "Session ID: ".session id()."<br>"; /1/ 输出 Session ID 

> 


如 果 把 客户 端的 Cookie 禁用 ， 单 击 testLphp 页 面 中 的 超 链接 会 出 现下 面 的 结果 ， 在 地 址 栏 里 会 


把 Session ID 以 session name=session id 的 格式 添加 到 URL 上 。 


如 果 客 户 端的 Cookie 可 以 使 用 ， 则 会 把 Session ID 保存 到 客户 端的 Cookie 里 ， 而 SID 就 成 为 一 | 


个 空 字符 串 ， 不 会 在 地 址 栏 中 的 URL 后 面 显示 。 启 用 客户 端的 Cookie， 重 复 前 面 的 操作 。 
21.2.6 ”设置 会 话 有 效 期 


在 大 多 数 网 站 和 应 用 程序 中 需要 限制 会 话 的 时 间 ， 如 12 个 小 时 、 一 个 星期 、 一 个 月 等 ， 这 时 就 
需要 设置 Session 会 话 的 有 效 期 限 ， 过 了 有 效 期 限 ， 用 户 会 话 就 被 关闭 。 

1. 客户 端 没有 禁用 Cookie 

使 用 session_set_cookir params() 函 数 设置 Session 的 失效 时 间 ， 此 函数 是 Session 结合 Cookie 设 
置 失效 时 间 ， 如 果 设 置 Seesion 在 1 分 钟 后 失效 ， 则 实现 的 代码 如 下 。 

<?php 

Stime = 60; 

session set_cookie params($time); 

session start(); 

$_SESSION["unsename"] = "Mr'; 

?> 


session_set_cookie_params0 必 须 在 session_start0 之 前 调用 。 不 过 不 推荐 使 用 该 函数 ， 所 以 一 般 手 

动 设置 失效 时 间 。 
【示例 1】 手动 设置 失效 时 间 的 代码 如 下 。 

<?php 

session start(); 

$time = 60; 

setcookie(session_name(),session_id(),time(+$time,"/"); // 手动 设置 会 话 失效 时 间 

$_ SESSION["unsename"] = "Mr'; 

?> 


session name 表示 Session 的 名 称 ，session id 表示 客户 端 用 户 的 标识 ， 因 为 session id 是 随机 产 
生 的 唯一 名 称 ， 所 以 Session 是 相对 安全 的 ， 失 效 时 间 和 Cookie 的 失效 时 间 一 样 ， 最 后 一 个 参数 为 可 
选 参数 ， 是 放置 Cookie 的 路 径 。 

2. 客户 端 禁 用 Cookie 

当 客 户 端 禁用 Cookie 时 ，Session 页 面 间 传 递 会 失效 ， 解 决 这 个 问题 有 4 种 方法 。 


“413: 


B 哆 半 设 计 与 网 站 建设 从 入 门 到 精通 ( 微 课 精 编 版 ) 


在 登录 之 前 提醒 用 户 必须 开启 Cookie， 这 是 很 多 论坛 的 做 法 。 
设置 php.ini 文件 中 的 sessionuse trans_sid = 1, 或 者 编译 时 打开 -enable-trans-sid 选项 ,让 PHP 
| 自动 跨 页 传递 session_id。 
全 站 | 回 ”通过 GET 方法， 使 用 隐藏 域 传递 session_id。 
| 使 用 文件 或 者 数据 库存 储 session id， 在 页 面 传递 中 手动 调用 。 
Note 第 二 种 情况 比较 被 动 ， 因 为 普通 开发 者 是 无 法 修改 服务 器 中 的 php.ini 配置 文件 ， 第 三 种 情况 就 
| 是 不 可 以 使 用 Cookie 设置 保存 时 间 ， 但 是 登录 情况 没有 变化 ， 第 四 种 情况 比较 重要 ， 特 别 是 在 企业 
”级 开发 中 ， 经 常 使 用 到 。 
| 【示例 2】 下 面 代 码 演示 了 以 第 三 种 方法 使 用 GET 方式 进行 传递 。 
<form method="post" action="sessionl.php?<?=session name();?>=<?=session 1d();?>"> 
用 户 名 : <input type="text" name="user" size="20"><br /> 
密码 : <input type="password" name="password" size="20"><br /> 


<input type="submit" value=" 提 交 " /> 
</form> 
然后 ， 在 session1.php 文件 中 设置 要 接收 session_ id 值 ， 并 进行 处 理 ， 示 例 代码 如 下 。 
<?php 
Ssess_name = session name(); 1/ 获取 Session 名 称 
S$sess id=$ GET[Ssess namel]; // 以 GET 方式 获取 session id 
Session id($sess_id); // 把 session id 值 存储 到 Session 对 象 中 
session start(; 
$_SESSION["admin"] = "Mr': 


?> 


21.3 案例 实战 


| 本 节 将 通过 案例 介绍 Cookie 和 Session 的 应 用 。 
21.3.1 控制 登录 时 间 


外 | 本 例 在 创建 Cookie 时 ， 设 置 Cookie 的 生命 周期 ， 实 现 控制 登录 用 户 的 过 期 时 间 ， 示 例 演 示 效 果 
如 图 21.5 所 示 。 


由 -| 屋 ntpyllocaho. ~ SC @ localbost 


由 -| 本 hapylocalho. - BC | @ localhost 


(a) 登录 (b) 提示 
图 21.5 控制 登录 时 间 


.414 。 
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【操作 步骤 】 
(1) 新 建 网 页 文件 ， 保 存 为 index.php， 编 写 用 户 登录 页 面 ， 将 用 户 登 录 信息 提交 到 index_ok.php | 


文件 。 | 
二 23 用 户 登 录 <05> 全 


<form name="forml" method="post" action="index_ok.php"> 
<p> 用 户 名 : Net e 
<input name="user" type="text" size="20"> | 
</p> | 
<p> 密 &nbsp;&nbsp;&nbsp; 码 : | 
<input name="pass" type="password" maxlength="20"> 
<p> 
<p> 
<input type="submit" name="Submit" value=" 提 交 "> 
</p> 
</form> 


(2) 新 建 网 页 文件 ， 保 存 为 index_ok.php 文件 ， 获 取 表单 提交 的 用 户 登录 信息 ， 并 且 判 断 登录 
的 用 户 名 和 密码 是 否 正确 ， 如 果 正 确 ， 则 将 用 户 名 和 密码 赋 给 指定 的 Cookie 变量 ， 并 设置 Cookie 的 | 
过 期 时 间 ， 再 跳 转 到 cookie.php 页 面 ， 否 则 ， 直 接 给 出 提示 信息 ， 并 重新 跳 转 到 登录 页 (index.php)。 | 


<?php 
header( "Content-type: text/html; charset=UTF-8" ); // 设置 文件 编码 格式 
if($_POST['user]!="" && $_POST['pass']!="){ 
if($_POST['user]=="admin" && $_ POST[pass] 一 "adminf{ 

setCookie("user",$ POST['user'],time()+60)or die(" 禁 止 cookie"); 

setCookie("pass",$_ POST['pass'],time0+60)or die(" 禁 止 cookie"); 

echo "<script>alert(' 登 录 成 功 ! ); window.location.href='cookie.php';</script>"; 
}else{ 

echo "<script>alert(' 用 户 名 或 者 密码 不 正确 ! '); window.location.href='index.php';</script>"; 
}else{ 

echo "<script>alert(' 用 户 名 或 者 密码 不 能 为 空 ! ); window.location href='index.php';</script>"; 
} 
Pe 


(3) 新 建 网 页 文件 ， 保 存 为 cookie.php 文件 ， 判 断 Cookie 变量 的 值 是 否 存在 ， 如 果 存 在 则 输出 
本 页 内 容 ， 否 则 ， 给 出 提示 信息 并 跳 转 到 登录 页 面 (index.php)。 | 


<h2> 登 录 提 示 </h2> 
<?php 

if($_COOKIE['user]-—="admin" && $ COOKIE['pass']——"admin"){ 

echo "欢迎 "$_ COOKIE[user]." 光 临 ! "; 

}else{ 
echo "<script>alert(COOKIE 已 经 过 期 ， 请 重新 登录 ); window.location.href~'index.php';</script>"; | 
| 
?> 


21.3.2 自动 登录 
本 例 设计 如 果 用 户 是 第 一 次 登录 , 则 需要 填写 用 户 名 和 密码 。 如 果 是 再 次 登录 ， 那么 就 不 需要 输 | 
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一 一 J 一 一 Ay 一 一、 全 页 缀 计生 风 站 于 设 以 入 门 到 精通 (彼得 本 编 版) 
， 


入 用 户 名 和 密码 ， 因 为 $ COOKIE 会 从 Cookie 中 读 取 这 些 信 息 ， 用 户 直接 单 击 登录 按钮 即 可 。 登 录 
| 成功 后 进入 main php 页 面 ， 运行 结果 如 图 21.6 所 示 。 


会 内 |@ npylocalho.. ~ B © | Blocalhost CS @ localhost 
二 十 十 自动 登录 自动 登录 
Note 性 录 和 称 [一 登录 名 称 ， mm 


登录 密码 : 登录 密码 : 
保存 时 间 ， 图 1 小 时 〇 1 天 保存 时 间 。 @ 1 小 时 〇 1 天 


提交 || 重 置 提交 | 重 置 


(a) 第 一 次 登录 (b) 第 二 次 进入 
图 21.6 自动 登录 


【操作 步骤 】 
(1) 新 建 网 页 文件 ， 保 存 为 ndex.php， 编 写 用 户 登 录 页 面 ， 将 用 户 登 录 信 息 提交 到 index_ok.php 


| <h2> 自 动 登录 </h2> 

| <form id="forml" name="form1" method="post" action="index_ok.php"> 

| <p> 登 录 名 称 : 

| <input name="name" type="text" class="txt" id="lgname" value="<?php if (! empty ( $_COOKIE 
| [name] )) echo $ COOKIE['name'];?>" size="20"> 

| </p> 

| <p> 登 录 密码 : 

| <input name="pwd" type="password" class="txt" id="lgpwd" value="<?php if (! empty ( $_COOKIE 
| [pwd]) oe COOKIE['pwd']:?>" size="20"> 


ee 
<input name="times" type="radio" value="3600" checked="checked"> 
1 小 时 
<input type="radio" name="times" value="86400"> 
1 天 </p> 
“> 


<input type="submit" name="Submit" value=" 提 交 "> 
<input type="reset" name="reset" value=" 重 置 "> 


(2) 创建 index_ok.php 文件 ， 通 过 $_POST 方法 获取 表单 中 提交 的 数据 ， 验 证 用 户 输入 的 用 户 
| | 名 和 密码 是 否 正确 。 如 果 正 确 ， 则 通过 setcookie0 函 数 创建 Cookie， 存 储 用 户 名 和 密码 ， 并 根据 表单 
| 提交 的 时 间 设置 Cookie 的 过 期 时 间 ， 并 跳 转 到 main.php 页 面 ; 如 果 不 正确 ， 则 给 出 提示 信息 ， 并 跳 
转 到 index.php 页 面 。 

<?php 
header("Content-type: text/html; charset=UTF-8"); / 设置 文件 编码 格式 
让 (! empty ($_POST [name'] ) and ! empty ($_POST ['pwd'] )) {// 判断 用 户 名 和 密码 是 否 为 空 
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让 ($_ POST [name] 一 "admin" &&S$ POST [pwd] 一 "admin") { | 
setcookie ( "name", $ POST [mame], time 0+S$ POST [times'] ); // 设置 cookie 有 效 时 间 为 1 小 时 
setcookie ( "pwd", $ POST [pwd],time (| +$_POST [times]);/ 设置 cookie 有 效 时 间 为 1 小 时 | 
echo "<script>alert('succeed!');window.location.href='main.php';</script>"; | 


jo ed | 芯 


echo "<script>alert('false!');:window.location.href="index.php';</script>"; 


} 
} else{ 

echo "<script>alert( 用 户 名 和 密码 不 能 为 空 ! ');window.location.href='index.php';</script>"; 
} 


?> 


(3) 创建 main.php 文件 ， 首 先 根据 $_COOKIE 获取 Cookie 值 ， 判 断 用 户 是 否 具 有 访问 权限 ， 
如 果 有 ， 则 可 以 看 到 本 页 内 容 ， 否 则 将 给 出 提示 信息 ， 并 跳 转 到 index.php 页 面 。 


<?php 
if($_COOKIE[mame] 一 ""){ ”// 根据 Cookie 的 值 ， 判 断 浏览 者 是 否 具有 访问 该 页 面 的 权限 | 
echo "<script>alert(' 您 不 具有 访问 该 页 面 的 权限 ! "); window.location.href "index.php';</script>";// 如 果 不 | 

具有 ， 输 出 请 您 正确 登录 ， 并 跳 转 到 登录 页 面 | 

jelsef // 如 果 正 确 ， 则 输出 主页 内 容 

?> 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title></title> 

</head> 

<body> 

<h2> 登 录 提 示 </h2> 

<p><?php echo $ COOKIE['name'] ?> 成 功 登 录 </p> 

</body> 

</html> 

<2php 

} 


?> 


21.3.3 ”限制 访问 时 间 


户 在 互联 网 发 布 的 网 站 可 能 有 成 百 上 千 次 的 浏览 , 并且 在 线 浏览 用 户 数量 一 直 增 加 ， 如 果 不 对 | | 
用 户 访问 网 站 的 时 间 进 行 限制 ， 结 果 会 造成 服务 器 资源 的 消耗 ， 网 站 瘫痪 。 本 例 通过 设置 Cookie 眼 | 
制 用 户 访问 网 站 的 时 间 ， 运 行 结果 如 图 21.7 所 示 。 
【操作 步骤 】 | 
(1) 创建 index.php 文件 。 首 先 初始 化 SESSION 变量 获取 SESSION ID， 然 后 通过 setcookie0 | 
函数 创建 Cookie， 并 将 SESSION ID 作为 Cookie 值 ， 同 时 设置 Cookie 的 有 效 时 间 为 10 秒 。 
<?php 
if(!lisset($_SESSION){ 
session start(); 
} 


视频 讲解 
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$session_id=session id(); 1/ 获取 SessionID 
setcookie("start", $session id,time()+10); 


让 及 | 登录 | 论坛 | 留言 


a 
Ws 
压轴 任 窜 大 全 外 > 二 
[ 3 阳具 联 系 方式 
ass ree 
mana | : rd 
9 33 村 站 如 全 虽 子 阳 节 
aa = es 


LE 
加 到 


(a) 有 效 状 态 (Cb) 失效 状态 
图 21.7 限制 访问 时 间 


(2) 在 页 面 中 通过 判断 COOKIE 变量 的 值 是 否 为 空 来 限制 用 户 访问 网 站 的 时 间 ， 有 具体 代码 如 下 
所 示 。 


<?php 
iftisset($_COOKIE['start]) && $ COOKIE['start ]==$session id){ 
?> 


<img src="images/index.jpg"> 


Jelse{ 


> 
<img src="images/login.jpg"> 
<?php 


} 
> 


21.4 在 线 练 习 


本 节 为 课 后 练习 ， 感 兴趣 的 同学 请 扫 码 进一步 强化 训练 。 


| 
| 
| 
| <php 
| 
| 
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访问 MySQL 数据 库 


MYySQL 采用 的 是 “客户 机 /服务 器 ”体系 结构 ， 此 时 PHP 就 充当 了 MySQL 客户 机 的 负 
PHP 通过 API 扩展 实现 与 MySQL 的 联系 ， 本 章 将 详细 讲解 mysqli 扩展 


【 学习 重 点 】 

WI 了 解 PHP 与 MySQL 通信 的 方式 

MH 了 解 PHP 与 MySQL 联系 的 一 般 过 程 

PI 能 够 使 用 mysqli 扩展 访问 MySQL 数据 库 


[ 网 交 设 计 与 网 站 建设 从 入门 到 精通 【 柚 课 精 编 县) 


22.1 访问 MySQL 基础 


| 
| 下 面 简单 介绍 一 下 PHP 与 MySQL 通信 的 基本 方式 和 一 般 步 骤 。 


22.1.1 访问 MySQL 的 方式 


PHP 联系 MySQL 的 方式 有 3 种 : mysql 扩展 、mysqli 扩展 、PHP 数据 对 象 (PDO )。 

1. mysql 扩展 

Imysql 扩展 是 PHP 应 用 与 MySQL 数据 库 交 互 的 早期 扩展 。mysql 扩展 提供 了 一 个 面向 过 程 的 接 
| 口 ， 并 且 是 针对 MySQL 4.1.3 或 者 更 早 版 本 设计 的 。 因 此 这 个 扩展 虽然 可 以 与 MySQL 4.1.3 或 更 新 的 
| 数据 库 服务 端 进行 交互 ， 但 并 不 支持 后 期 MySQL 服务 端 提供 的 一 些 特性 。 

| < 注意 : 由 于 mysql 扩展 太古 老 , 又 不 安全 ,在 PHP7 中 已 经 不 再 支持 ， 因 此 本 书 也 不 再 详细 介绍 。 
| 2. mysqli 扩展 

| mysqli 扩展 也 称 为 mysql 增强 扩展 ,是 PHP5 新 增加 的 , 对 mysgl 扩展 进行 改进 , 执行 速度 更 快 ， 
| 使 用 更 方便 ， 访 问 数据 库 更 加 稳定 。mysqli 扩展 可 以 使 用 MySQL 4.1.3 或 更 新 版 本 中 新 的 高 级 特性 ， 
| 如 调用 MySQL 的 存储 过 程 、 处 理 MySQL 事务 等 。 

| mysqli 扩展 的 特点 : 面向 对 象 接口 、prepared 语句 支持 、 多 语句 执行 支持 、 事 务 支持 、 增 强 的 调 
| 试 能 力 、 典 入 式 服 务 支 持 、 预 处 理 方式 完全 解决 了 SQL 注入 的 问题 。 不 过 它 也 有 缺点 ， 就 是 只 支持 
| MySQL 数据 库 。 如 果 要 访问 其 他 数据 库 ， 则 只 能 够 使 用 PDO 扩展 。 

| 3. PHP 的 PDO 


视频 讲解 | 


| PDO 是 PHP Data Objects 的 缩写 ， 是 PHP 应 用 中 的 一 个 数据 库 抽象 层 规范 。PDO 提供 了 一 个 统 
| 一 的 API 接口 ，PHP 应 用 不 再 关心 连接 的 数据 库 服务 器 系统 类 型 。 因 此 ， 使 用 PPO， 可 以 在 任何 需 
”要 时 ,无 颖 切换 数据 库 服务 器 ， 如 从 Oracle 到 MySQL。 其 功能 类 似 于 JDBC、ODBC、DBI 之 类 的 接 
| 口 。 同 时 ， 它 也 解决 了 SQL 注入 问题 ， 有 很 好 的 安全 性 。 


22.1.2 访问 MySQL 一 般 步 又 
使 用 PHP 访问 MySQL 数据 库 一 般 需 要 5 步 ， 如 图 22.1 所 示 。 


1 
i 
i 
i 
! 
i 
>”; 
i 


图 22.1 PHP 与 MySQL 联系 
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下 面 以 mysqli 扩展 的 过 程式 函数 为 例 进行 说 明 。 
【操作 步骤 】 
(1) 连接 MySQL 服务 器 。 使 用 PHP 的 mysqli connectO 函 数 建立 与 MySQL 服务 器 之 间 的 连接 。 
(2) 选择 MySQL 数据 库 。 使 用 mysqli_select_db0 函 数 选择 MySQL 服务 器 中 的 数据 库 ， 并 5 2 
据 库 建立 连接 。 一 一 
(3) 执行 SQL 查询 操作 。 选 择 数据 库 之 后 ， 就 可 以 使 用 mysqli_queryO 函 数 执行 SQL 语句 ， 对 | EY 
数据 库 的 操作 主要 包括 5 种 方式 。 
查询 数据 : 使 用 select 语句 实现 数据 的 查询 功能 。 
显示 数据 : 使 用 select 语句 显示 数据 的 查询 结果 。 
插入 数据 :使 用 insert into 语句 向 数据 库 中 插入 数据 。 
更 新 数据 : 使 用 update 语句 修改 数据 库 中 的 记录 。 
删除 数据 : 使 用 delete 语句 删除 数据 库 中 的 记录 。 
4) 清除 记录 集 。 数 据 库 操作 完成 之 后 ， 需 要 回收 记录 集 ， 以 释放 系统 资源 。 
mysqli free result($result); 


(5) 关闭 MySQL 服务 器 。 在 完成 数据 库 操作 之 后 ， 应 使 用 mysqli_close0 函 数 关闭 与 MySQL | 
服务 器 的 连接 。 | 


mysqli_close($link); 


一 图 图 图 图 多 


22.2 使 用 mysqli 扩展 


mysqli 扩展 被 封装 在 一 个 类 中 ， 它 是 一 种 面向 对 象 的 技术 。mysqli 
扩展 模块 包括 3 个 子 类 。 
回 mysqli。 
回 mysqli result。 
回 mysqli_ stmt。 
搭配 使 用 这 3 个 类 ， 就 可 以 连接 MySQL 数据 库 服务 器 、 选 择 数据 库 、 查 询 和 获 
取 数据 ， 以 及 使 用 预 处 理 语句 等 。 | 
当然, 习惯 过 程 化 编程 的 用 户 也 不 用 担心 , mysqli 也 提供 了 一 个 传统 的 函数 式 接口 , 确保 与 mysql ， 
扩展 的 顺利 过 渡 ， 只 不 过 以 mysqli 为 前 级 ， 而 不 是 以 mysql 为 前 级， 用 法 基本 与 mysql 扩展 相似 本 ， 
书 将 重点 介绍 mysqli 的 面向 对 象 的 编程 方法 ， 并 适当 兼顾 过 程式 编程 的 用 户 习惯 有 关 PHP 的 mysqli | 
过 程 化 函数 ， 可 以 扫描 右 侧 二 维 码 了 解 。 
疙 提示: 如 有 果 以 过 程式 进行 操作 ， 有 些 mysqli 函数 必须 指定 资源 ， 如 mmysqli_query (资源 标识 ,SQL ， 
语句 ) ， 而 mysql_query ( SQL 语句 ，' 可 选 ) 的 资源 标识 是 放 在 后 面 的 ， 且 可 以 不 指定 ， 默 
认 是 上 一 个 打开 的 连接 或 资源 ,关于 如 何 兼容 早期 的 mysql 函数 应 用 的 页 面 , 可 以 扫 码 了 解 。 


回 & 
视频 讲解 
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线 上 阅读 
mysqli 类 主要 控制 PHP 和 MySQL 数据 库 服务 器 之 间 的 连接 、 选 择 数据 库 、 向 MySQL 服务 器 发 | 
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送 SQL 语句 ， 以 及 设置 字符 集 等 ， 这 些 任务 都 是 通过 该 类 中 声明 的 构造 方法 、 成 员 方法 和 成 员 属 性 
完成 的 。mysqli 类 声明 的 成 员 方法 和 成 员 属性 可 以 扫 码 了 解 。 


人 22.3.1 启用 mysqli 扩展 模块 


| 如果 在 Linux 平台 中 启用 mysqli 扩展 ， 必 须 在 编译 PHP 时 加 上 with-mysqli 选项 。 
EX。 如 果 在 Windows 平台 中 启用 mysqli 扩展 , 必须 在 php ini 文件 中 找到 下 面 一 行 , 取消 前 面 的 注释 


| 如 果 没 有 找到 就 添加 这 样 一 行 。 
| extension=php_mysqli.dll / 在 php.ini 文件 中 启用 这 一 行 


， 滋 提 示 : 可 以 在 PHP 脚本 中 ， 调 用 phpinfo0 函 数 检查 PHP 版 本 是 否 支持 mysqli 接口 。 


22.3.2 连接 MySQL 服务 器 


| PHP 程序 在 与 MySQL 服务 器 交互 之 前 ， 需 要 成 功 地 连接 MySQL。 如 果 选 择 使 用 PHP 面向 对 象 
接口 与 MySQL 服务 器 连接 ， 可 以 有 如 下 两 种 选择 方式 。 

| 1. 快速 连接 

通过 mysqli 类 的 构造 方法 实例 化 对 象 。mysqli0 构 造 函 数 的 语法 格式 如 下 。 


$mysqli=new mysqli( [string host [, string username [, string passwd [, string dbname 
[ int port [, string socket]]]]]] ); 


参数 说 明 如 下 。 

host: 表示 MySQL 服务 器 的 主机 名 ， 如 'localhost'。 

username: 表示 MySQL 用 户 名 。 默 认 值 是 服务 器 进程 所 有 者 的 用 户 名 ， 如 'root'。 
password: 表示 MySQL 用 户 密码 。 默 认 值 是 空 密码 。 
dbname: 表示 要 连接 的 数据 库 的 名 称 。 

port: 表示 MySQL 服务 器 的 端口 号 。 默 认为 3306 号 端口 。 
socket: 一 个 套 接 字 文 件 或 命名 管道 。 

| mysqli0 构 造 函数 包含 6 个 可 选 参数 ， 其 中 前 4 个 参数 较 常用 ， 后 面 两 个 很 少 使 用 。 如 果 连 接 成 
| 功 ， 将 返回 一 个 mysqli 对 象 。 


< 全 注意: 通过 这 种 方式 就 不 用 再 调用 mysqli 对 象 的 connectO 和 select db0 等 方法 去 连接 MySQL 服 
务 器 和 选择 数据 库 。 在 连接 成 功 后 ， 可 以 通过 mysqli 对 象 的 select db() 方 法 改变 连接 的 数 
据 库 。 

【兼容 方法 】 
| 如 果 使 用 过 程式 编程, 可 以 直接 调用 mysqli_connectO 函 数 , 其 语法 格式 与 mysqli0 构 造 函 数 相同 ， 
| 参数 和 返回 值 也 相同 。 
| mysqli_connect(host, username, password, dbname, port, socket); 

如 果 要 保持 与 mysql 扩展 的 兼容 ， 可 以 按 如 下 写法 实现 。 


Slink = mysqli_connect($host, $usermame, $passwd); // 建立 连接 
mysql select _ db($link, Sdbname): / 选择 数据 库 


图 图 图 图 图 固 
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【示例 】 下 面 示例 分 别 使 用 面向 对 象 化 和 过 程式 两 种 不 同方 法 连接 本 地 MySQL 服务 器 中 的 
db_book test 数据 库 。 


<?php 

$host = 'localhost': 1/ 指定 MySQL 服务 器 

Susername = root'; // 指定 用 户 名 

Spassword="11111111'; / 指定 登录 密码 

S$dbname ='db_book test'; / 指定 数据 库 名 称 

/mysqli 对 象 化 

$db = new mysqli($hostSusername,$password,$dbname); / 连接 数据 库 

/ 或 者 也 可 以 这 样 

$db = mysqli_connect($host,$username,$password,$dbname): // 连接 数据 库 

ifSdb){ / 检测 是 否 连 接 成 功 
echo "MySQL 服务 器 连接 成 功 !"; 

} 

/mysqli 过 程式 ， 兼 容 MySQL 习惯 

Slink = mysqli connect($hosb$username,Spassword); / 建立 连接 

mysqli_select_db($link, $Sdbname); 1/ 选择 数据 库 

if($link){ / 检测 是 否 连接 成 功 


echo "MySQL 服务 器 连接 成 功 !"; 


?> 


镶 


-人 注意， 未 章 所 有 练习 示 全 部 将 用 到 db_book_ test 数据 库 ， 请 在 本 书 源码 包 中 复制 对 应 章节 的 


db_book test 文件 夹 到 本 地 MySQL 的 Data 目录 下 。 或 者 通过 phpMyAdmin 新 建 数据 库 


db_book_test， 然 后 把 db_book_test.sql 数据 表 结 构 和 内 容 导 入 数据 库 中 。 
2. 个 性 连接 


如 果 在 创建 mysqli 对 象 时 ， 没 有 向 构造 函数 传 入 连接 参数 ， 就 需要 调用 mysqli 对 象 的 connectO 


方法 连接 MySQL 数据 库 服 务 器 ， 还 可 以 使 用 select_db0 方 法 特别 指定 数据 库 ， 例 如 : 


$mysqli=new mysqli(); // 创建 mysqli 对 象 
$mysqli->connect("localhost", "mysql_user", "mysql_pwd"); / 连接 MySQL 数据 库 服务 器 
S$mysqli->select_db("mylib"); / 选择 特定 的 数据 库 


虽然 使 用 mysqliO 构 造 方法 建立 连接 是 最 方便 的 方法 ， 但 也 有 一 个 缺点 : 无 法 设置 任何 MySQL 


特有 的 连接 选项 。 

例如 ， 设 置 连接 倒计时 ， 在 连接 成 功 之 后 立刻 执行 一 个 SQL 命令 等 ， 所 以 还 可 以 像 下 面 这 样 去 
创建 一 个 连接 。 

上 # 如 果 没 有 连接 则 使 用 mysqli_init() 函 数 创建 一 个 连接 对 象 */ 

Smysqli = mysqli_init(); 

上 # 下 面 两 行 设置 连接 选项 */ 

$mysqli->options(MYSQLI INIT COMMAND, "SET AUTOCOMMIT=0"); 。 // 连接 成 功 则 执行 

$mysqli->options(MYSQLI OPT_ CONNECT TIMEOUT 5); / 设置 倒计时 

/# 通过 mysqli 对 象 中 的 real_connect0 方 法 连接 MySQL 服务 器 */ 

$mysqli->real connect(localhost, 'mysql] user, mysql pwd', mylib); 
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网 于 设计 与 网 站 建设 从 入 门 到 精通 【 柚 课 精 编 县) 


22.3.3 ”处 理 连接 错误 报告 


| 在 连接 过 程 中 难免 会 出 现 错误 ， 应 该 及 时 让 用 户 得 到 通知 。 在 连接 出 错时 ，mysqli 对 象 并 没有 创 
| 建成 功 ， 所 以 就 不 能 调用 mysqli 对 象 的 成 员 获 取 这 些 错误 信息 。 
| 可 以 通过 mysqli 扩展 的 过 程 方式 获取 。 使 用 mysqli_connect_errno0 函 数 测试 在 建立 连接 的 过 程 中 
是 否 发 生 错误 ， 相 关 的 出 错 消息 由 mysqli_connect_error0 函 数 负责 返回 ， 例 如 : 
| $db = new mysqli($host,Susername,$password,$dbname); // 连接 数据 库 
| 心 检查 连接 ， 如 果 连 接 出 错 输出 错误 信息 并 退出 程序 */ 
if (mysqli connect errnoO)) { 
printf(" 连 接 失 败 : %s\n", mysqli_connect_error()); 
exitO; 
} 


| 22.3.4 ”关闭 与 MySQL 服务 器 连接 


| 完成 数据 库 访问 工作 ， 如 果 不 再 需要 连接 ， 应 该 明确 地 释放 有 关 的 mysqli 对 象 。 虽 然 脚 本 执行 
| 结束 后 ， 所 有 打开 的 数据 库 连接 都 将 自动 关闭 ， 资 源 被 回收 。 但 是 ， 在 执行 过 程 中 ,页面 可 能 需要 多 
| 个 数据 库 连 接 ， 各 个 连接 要 在 适当 的 时 候 将 其 关闭 。 

| 使 用 mysqli 对 象 的 close( 方 法 可 以 关闭 打开 的 数据 库 连 接 ， 关 闭 成 功 时 返回 tue， 否 则 返回 false。 
| 【示例 】 在 下 面 示例 中 ,连接 MySQL 数据库 服务 器 、 检 查 连接 、 通 过 mysqli 对 象 中 的 一 些 成 员 
| 方法 和 属性 获取 连接 的 详细 信息 ， 最 后 将 打开 的 数据 库 连 接 关 闭 。 


<?php 

$host = "localhost'; // 指定 MySQL 服务 器 
$username = root'; / 指定 用 户 名 
Spassword="11111111'; / 指定 登录 密码 
$dbname ='db_book test'; / 指定 数据 库 名 称 


Smysqli = new mysqli($host,$Susername,$password,$dbname); / 连接 数据 库 
/* 检查 连接 ， 如 果 连 接 出 错 输 出 错误 信息 并 退出 程序 */ 
if (mysqli_connect errno ()) { 

printf ("连接 失败 :<br>", mysqli_connect_error 0 ); 

exit (); 


} 

诈 打印 当前 数据 库 使 用 字符 集 字符 串 */ 

printf ( "当前 数据 库 的 字符 集 : ”%s<br>", Smysqli->character_set_name () ); 
上 # 打印 客户 端 版 本 */ 

printf ( "客户 端 库 版 本 :”%s<br>", Smysqli->get_client info 0 ); 
谍 打印 服务 器 主机 信息 */ 

printf ( "主机 信息 :”%s<br>", Smysqli->host info ); 

上 # 打印 字符 串 形 式 MySQL 服务 器 版 本 */ 

printf ( "服务 器 版 本 : %s<br>", Smysqli->server info ); 

| 启 打印 整数 形式 MySQL 服务 器 版 本 */ 

printf ( "服务 器 版 本 : %d<br>", $mysqli->server_version ); 

上 # 关闭 打开 的 数据 库 连接 */ 

S$mysqli->close(); 

> 
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上 面 代码 输出 的 结果 如 下 所 示 。 

当前 数据 库 的 字符 集 : utf8 

客户 端 库 版 本 : mysqlnd 5.0.12-dev - 20150407 - SId: 38fea24f2847fa7519001be390c98ae0acafe387 $ 
主机 信息 : localhost via TCP/IP | 会 内 
服务 器 版 本 : 5.7.13-log ~ 
服务 器 版 本 : 50713 


22.3.5 执行 SQL 命令 


mysqli 类 提供 了 几 种 执行 SQL 命令 的 方法 , 其 中 最 常用 的 是 query0 方 法 。 对 于 INSERT (插入 )、 
UPDATE (更 新 )、DELETE (删除 ) 等 不 会 返回 数据 的 SQL 命令 ，query0 方 法 在 SQL 命令 执行 成 功 ， 视频 讲解 
时 将 返回 true。 | 
可 以 通过 mysqli 对 象 的 affected_rows 属性 获取 有 多 少 条 数据 记录 发 生 了 变化 。 使 用 mysqli 对 象 | 
的 insert_id0 属 性 可 以 返回 最 后 一 条 INSQL 命令 生成 的 AUTO_INCREMENT 编号 值 。 | 
【示例 】 下 面 示 例 向 数据 库 db_book test 中 的 tb_contact 数据 表 插 入 一 条 记录 ， 然 后 返回 新 变动 | 
的 记录 数 ， 以 及 插入 记录 的 ID 值 。 | 


<2php 

1/ 省 略 数据 库 连 接 的 4 个 初始 化 变量 ， 可 参考 22.3.4 节 示 例 代码 

$mysqli = new mysqli($host,$Susername,$password,$dbname); // 连接 数据 库 

上 # 执行 SQL 命令 向 表 中 插入 一 条 记录 ， 并 获取 改变 的 记录 数 和 新 ID 值 */ | 

if ($mysqli->query ( "insert into tb_contact(name, departmentId, address, phone, email ) values('test ,D03,"' 上海“ 

1113844448888','test@163.com)" )) { | 

echo "改变 的 记录 数 : ". $mysqli->affected rows . "<br>"; 
echo "新 插入 的 ID 值 : " . $mysqli->insert id . "<br>"; 

} 

$mysqli->close 0; 

?> 


上 面 代码 输出 的 结果 如 下 所 示 。 

改变 的 记录 数 : 1 

新 插入 的 ID 值 : 6 | 
尖 提示 : 如果 在 执行 SQL 命令 时 发 生 错误 ，query0 方 法 将 返回 false， 此 时 可 以 通过 mysqli 对 象 的 

errno 和 error 属性 获得 错误 编号 和 错误 原因 。 | 

如 果 执 行 有 返回 数据 的 SQL 命令 SELECT (选择 )， 执 行 成 功 后 则 返回 一 个 mysqli_result 对 象 ， 
该 对 象 属于 mysqli result 类 ， 将 在 22.4 节 详细 介绍 。 | 

mysqli 对 象 的 query0 方 法 每 次 调用 只 能 执行 一 条 SQL 命令 ， 如 果 想 一 次 执行 多 条 命令 ， 就 必须 
使 用 mysqli 对 象 的 multi_query0 方 法 。 如 果 想 以 不 同 的 参数 多 次 执行 一 条 SQL 命令 ， 最 有 效率 的 办 
法 是 先 对 那 条 命令 做 一 些 预 处 理 ， 然 后 再 执行 。 | 


22.4 显示 记录 集 


mysqli_result 类 的 对 象 包含 SELECT 查询 的 结果 ， 获 取 结果 集中 数据 的 成 员 方法 ，， 和 | 
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22.4.1 创建 结果 集 对 象 


| mysqli_result 类 的 对 象 ， 默 认 是 通过 mysqli 对 象 的 query0 方 法 执行 SELECT 语句 返回 的 ， 并 把 
， 所 有 的 结果 数据 从 MySQL 服务 器 取 回 到 客户 端 ， 保 存在 该 对 象 中 。 

如 果 和 希望 把 结果 和 暂时 留 在 MySQL 服务 器 上 ,在 需要 时 才 一 条 条 地 读 取 记录 ,就 需要 在 调用 query0 
| 方法 时 ， 在 第 二 个 参数 中 提供 一 个 MYSQL_USE RESULT 值 。 当 处 理 的 数据 集合 比较 大 或 不 适合 一 
| 次 全 部 取 回 到 客户 端 时 ， 使 用 这 个 参数 比较 有 用 。 但 是 ， 要 想 知道 本 次 查询 到 底 找到 了 多 少 条 记录 ， 
”只 能 在 所 有 的 结果 记录 被 全 部 读 取 完毕 之 后 。 


| 【示例 1】 下 面 示例 使 用 mysqli 对 象 的 query0 方 法 获取 结果 集 ， 第 一 行 代 码 将 把 数据 取 回 到 客 
| 户 端 ， 第 二 行 代码 把 数据 留 在 MySQL 服务 器 上 ， 需 要 时 再 取 。 
| 了 将 数据 取 回 到 客户 端 

Sresult = $mysqli->query("SELECT * FROM tb_contact LIMIT 4"); 

// 留 在 MySQL 服务 器 上 

Sresult = $mysqli->query("SELECT * FROM tb_contact", MYSQLI USE RESULT); 


容 提示 : 也 可 以 使 用 mysqli 对 象 的 real query()、 store_result() 或 use_result(0 方 法 相 结合 获取 结果 集 。 

real_query0 方 法 与 query0 方 法 相同 ， 只 是 无 法 确定 所 返回 结果 集 的 类 型 ， 可 以 使 用 
store_result0 方 法 获取 整个 结果 集 。 将 所 有 记录 存储 在 一 个 对 象 中 ， 在 合适 的 时 候 加 以 解 
析 ， 这 称 为 缓冲 结果 集 。 


【示例 2】 可 以 在 缓冲 结果 集 的 记录 中 向 前 和 向 后 导航 ， 甚 至 直接 跳 到 任意 一 条 记录 上 。 


/ 无 法 确定 所 返回 结果 集 的 类 型 
$mysqli->real query("SELECT * FROM tb_contact LIMIT 4"); 
Sresult = Smysqli->store_result0; 。“// 获取 一 个 缓冲 结果 集 


| 由 于 这 种 缓冲 结果 集 是 获取 整个 结果 集 ,可 能 占用 非常 多 的 内 存 ， 所 以 一 旦 结果 集 操作 结束 ， 就 
| 要 及 时 回收 内 存 。 

使 用 mysqli 对 象 的 real query0 方 法 和 use_result0 方 法 结合 ， 也 是 从 服务 器 获取 结果 集 ， 但 并 不 
| 是 获取 整个 集合 ， 而 是 可 以 在 适当 的 时 候 获取 各 条 记录 。 因 为 这 种 方式 只 是 开始 结果 集 的 获取 ， 所 以 
| 不 仅 无 法 确定 集合 中 的 记录 总 数 ， 也 无 法 向 后 导航 或 跳 到 某 条 记录 。 


22.4.2 ”回收 查询 内 存 


视频 讲解 在 对 结果 集结 束 操作 时 , 应 该 使 用 mysqli_result 对 象 的 close0 方 法 回收 结果 集 占 用 的 内 存 。 注 意 ， 
| 一旦 执行 了 这 个 方法 ， 结 果 集 就 不 再 可 用 。 


| 22.4.3 ”从 结果 集中 解析 数据 


执行 查询 并 准备 了 结果 集 之 后 ， 即 可 开始 解析 。 解 析 的 内 容 包 括 : 从 结果 集中 获取 需要 的 记录 、 
揽 讲 角 | 字段 信息 以 及 整个 表 的 属性 等 。 
| 与 mysql 扩展 模块 类 似 ，mysqli 接口 在 结果 集 对 象 中 也 提供 了 fetch_row0、fetch_array0、 
| fetch_assocO 和 fetch_object() 4 个 彼此 很 相似 的 方法 来 依次 读 取 结 果 数 据 行 。 这 4 个 方法 只 在 引用 字 
段 的 方式 上 有 差别 ， 它 们 的 共同 点 是 : 每 次 调用 将 自动 返回 下 一 条 结果 记录 ， 如 果 已 经 到 达 结果 数据 
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表 的 末尾 ， 则 返回 false。 
1. fetch rowO 


fetch_row0 方 法 能 够 从 结果 集中 获取 一 条 结果 记录 ， 将 值 存放 在 一 个 索引 数组 中 。 与 其 他 3 个 方 
法 相 比 ，fetch_row0 是 最 方便 的 方法 。 | 
各 个 字段 需要 以 Srow[$a] 的 方式 访问 ， 其 中 $row 是 从 结果 集中 获取 的 一 行 记录 返回 的 数组 ，$n ， 
为 连续 的 整数 下 标 。 因 为 返回 的 是 索引 数组 ， 所 以 可 以 和 list0 函 数 结合 在 一 起 使 用 。 Note 
【示例 1】 下 面 是 一 个 简单 示例 ， 演 示 查 询 数据 表 tb_contact 中 D02 部 门 员工 的 记录 集 ， 获取 他 | 
们 的 姓名 和 电子 邮箱 地 址 ， 然 后 使 用 fetch_row0 方 法 逐一 读 取 每 条 记录 ， 并 显示 出 来 。 | 


<?php | 
$host= ‘localhost’; // 指定 MySQL 服务 器 | 
$username = Toot'; / 指定 用 户 名 | 
Spassword ="11111111'; / 指定 登录 密码 | 
Sdbname ='db_book test'; / 指定 数据 库 名 称 

Smysqli = new mysqli($host,$username,$password,$dbname); / 连接 数据 库 

S$mysqli->query("set names utf8" ); / 设置 结果 的 字符 集 


必 将 部 门 编号 为 D02 的 联系 人 姓名 和 电子 邮件 全 部 取出 存 入 结果 集中 */ 
$result = $mysqli->query ( "SELECT name, email FROM tb_contact WHERE departmentId="D02" ); 
echo 'D02 部 门 的 联系 人 姓名 和 电子 邮件 : “ 
echo '<ol>"; 
while ( list ( $name, Semail ) = $result->fetch row() ) { // 从 结果 集中 遍历 每 条 数据 
echo '<li>' . $name .': '. Semail . '</li>'; / 以 列表 形式 输出 每 条 记录 
} 
echo '</ol>'; 


Sresult->close (); // 关闭 结果 集 
$mysqli->close (0); / 关闭 与 数据 库 的 连接 
?> 


输出 结果 如 下 所 示 。 


D02 部 门 的 联系 人 姓名 和 电子 邮件 : 
1. 李 四 : lisi@163.com | 
2. 赵 六 : zhaoliu@163.com | 
在 上 面 示例 中 ， 也 可 以 通过 遍历 数组 获取 同样 的 输出 结果 。 但 通过 list0 函 数 和 while 循环 结合 使 
用 ， 遇 到 每 条 记录 时 将 字段 赋 给 一 个 变量 ， 可 以 简化 一 些 步骤 。 
2. fetch assoc() 
fetch_assoc() 方 法 将 以 一 个 关联 数组 的 形式 返回 一 条 结果 记录 ， 数 据 表 的 字段 名 表示 键 ， 字 段 内 
容 表 示 值 。 
【示例 2】 下 面 示例 演示 了 从 数据 表 tb_contact 中 查询 所 有 记录 ， 并 以 表格 的 形式 把 所 有 数据 显 
示 出 来 ， 演 示 效 果 如 图 22.2 所 示 。 | 


<?php 
/ 省 略 数据 库 连 接 代码 ， 请 参考 22.4.2 节 示 例 
Sresult = $mysqli->query ( "SELECT* FROM tb_contact" ); “/ 执行 查询 语句 获取 结果 集 | 


echo '<table width="90%" border="1" align="center">'; / 打印 HTML 表格 | 
echo '<caption><h1> 联 系 人 信息 表 </h1></caption>'; / 输出 表 名 | 
echo '<th> 用 户 ID</th><th> 姓 名 </th><th> 部 门 编号 </th><th> 联 系 地 址 </th><th> 联 系 电话 </th><th> 电 子 邮件 ， 
</tb>' / 输出 字段 名 | 
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while ($row = $result->fetch assoc 0 ) { / 循环 从 结果 集中 遍历 记录 


echo ‘<tr>"; / 输出 行 标记 

echo '<td>'. Srow ["id"] . '</td>"; / 输出 用 户 人 D 

echo '<td>' . $row ["name"] . '</td>'; / 输出 用 户 姓 名 

echo '<td>' . $row ["departmentId"] . '</td>"; / 输出 部 门 编号 

echo '<td>' . $row ["address"] . '</td>"; / 输出 联系 地 址 

echo '<td>' . $row ["phone"] . '</td>"; / 输出 联系 电话 

echo '<td>" . $row ["email"] . '</td>"; / 输出 电子 邮件 

echo ‘</tr>"; 
} 
echo '</table>'; 
Sresult->close (); // 关闭 结果 集 释 放 内 存 
Smysqli->close (); / 关闭 与 数据 库 服务 器 的 连接 
> 


13577778888 [zhangsan@163 com 
13501681234 [isG@l163 com 
13501683876 [wangwuG@163 com 
13580168357 [zhaoliu@163 com 
13501682468 hou @163 com 
13844448888 ltest@163.com 


图 22.2 获取 结果 集 数 据 输出 


3. fetch arrayO 
| fetch_array0 方 法 是 fetch_ row0 和 fetch_assoc0 两 个 方法 的 结合 ,可 以 将 结果 集 的 各 条 记录 获取 为 
| 一 个 关联 数组 或 数值 索引 数组 ， 或 者 同时 获取 为 关联 数组 和 索引 数组 。 
| 在 默认 情况 下 , 会 同时 获取 这 两 种 数组 。 可 以 通过 在 该 方法 的 参数 中 传 入 如 下 不 同 的 值 来 修改 这 
| 种 默认 行为 。 
”四 MYSQLL ASSOC: 记录 被 作为 关联 数组 返回 ， 字 段 名 为 键 ， 字 段 内 容 为 值 。 

回 MYSQLL NUM: 记录 被 作为 索引 数组 返回 ， 按 查询 中 指定 的 字段 名 顺序 排序 。 

MYSQLI BOTH: 这 是 默认 值 ， 记 录 即 作为 关联 数组 又 作为 索引 数组 返回 。 因 此 ， 每 个 字段 

可 以 根据 其 索引 偏 移 引 用 ， 也 可 以 根据 字段 名 来 引用 。 


4 注意 : 如 果 没 有 特殊 要 求 ， 尽 量 不 要 使 用 fetch_array0 方 法 ， 使 用 fetch_row0 或 feteh_assoc0 方 法 
| 实现 相同 的 功能 ， 效 率 会 更 高 一 些 。 


4. fetch objectO 


| fetch_object0 方 法 与 前 面 3 个 方法 不 同 , 它 将 以 一 个 对 象 的 形式 返回 一 条 结果 记录 , 而 不 是 数组 。 
| 它 的 各 个 字段 需要 以 对 象 的 方式 进行 访问 ， 数 据 列 的 名 字 区 分 字母 大 小 写 情况 。 
| 【示例 3】 以 示例 2 为 基础 ， 使 用 fetch_object0 方 法 提供 的 结果 相同 。 


<?php 
/ 省 略 数据 库 连 接 代码 ， 请 参考 22.4.3 节 示 例 
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Sresult = $mysqli->query ( "SELECT * FROM tb_contact" ); // 执行 查询 语句 获取 结果 集 


echo '<table width="90%" border="1" align="center">"; / 打印 HTML 表格 
echo '<caption><h1> 联 系 人 信息 表 </h1></caption>'; / 输出 表 名 
echo '<th> 用 户 ID</th><th> 姓 名 </ 了 h><th> 部 门 编号 </th><th> 联 系 地 址 </ 也 ><th> 联 系 电话 <ltb><th> 电 子 邮件 | | 
Las // 输出 字段 名 
while ( $rowObj = $result->fetch_object 0 ) { / 循环 从 结果 集中 遍历 记录 | 
echo '<tr align="center">'; / 输出 行 标记 
echo '<td>' . SrowObj->id . '</td>"; / 输出 用 户 人 D 
echo '<td>' . $rowObj->name . '</td>"; / 输出 用 户 姓名 | 
echo '<td>' . SrowObj->departmentId .'</td>': / 输出 部 门 编号 | 
echo '<td>' . SrowObj->address . '</td>"; / 输出 联系 地 址 
echo '<td>' . $rowObj->phone .'</td>'; / 输出 联系 电话 
echo '<td>' . $rowObj->email .'</td>': / 输出 电子 邮件 
echo ‘</tr>"; 


} 
echo '</table>'; 


$result->close (); / 关闭 结果 集 释 放 内 存 
$mysqli->close (); / 关闭 与 数据 库 服 务 器 的 连接 
?> 


总 提示 : 以 上 4 个 结果 集中 遍历 数据 的 方法 ， 每 次 调用 都 将 自动 返回 下 一 条 结果 记录 。 如 果 起 改变 
这 个 读 取 的 顺序 ， 可 以 使 用 结果 集 对 象 的 data_seek() 方 法 明确 地 改变 当前 记录 位 置 . 还 可 
以 使 用 结果 集 对 象 的 num rows 属性 ， 给 出 结果 数据 表 里 的 记录 个 数 。 还 可 以 使 用 结果 对 | 
象 的 lengths 属性 返回 一 个 组 ， 该 数组 的 各 个 元 素 是 使 用 以 上 4 个 方法 最 后 读 取 的 结果 记 ， 
录 中 各 字段 里 的 字符 个 数 。 


22.4.4 ”从 结果 集中 获取 数据 列 的 信息 


在 解析 结果 集 时 ， 不 仅 需要 从 中 遍历 数据 ， 有 时 也 需要 获取 数据 表 的 属性 和 各 个 字段 的 信息 。 | 
户 可 以 通过 结果 集 对 象 的 field_count 属 性 获取 结果 数据 表 里 的 数据 列 的 个 数 ,使 用 current field | 
属性 获取 指向 当前 列 的 位 置 ， 使 用 field_seek() 方 法 改变 指向 当前 列 的 偏 移 位 置 ， 使 用 fetch_field0 方 | 
法 获取 当前 列 的 信息 。 | 
【示例 】 下 面 示例 查询 数据 表 tb_contact 中 D02 部 门 员工 的 记录 集 ， 获 取 他 们 的 姓名 和 电子 邮箱 ， 

地 址 ， 然 后 获取 结果 集中 列 数 以 及 相关 信息 。 | 

<?php 

/ 省 略 数据 库 连 接 代码 ， 请 参考 前 面 示例 

上 # 把 部 门 编号 为 D02 的 联系 人 姓名 和 电子 邮件 全 部 取出 存 入 结果 集中 */ 

Sresult = $mysqli->query ( "SELECT name, email FROM tb_contact WHERE departmentId='D02" ); 

echo "结果 集中 数据 列 个 数 : " . $result->field_count . " 列 <br>"; / 从 查询 结果 中 获取 列 数 | 

echo "默认 当前 列 的 指针 位 置 : ". Sresult->current field . " 列 <br>"; 。“”// 打印 默认 列 的 指针 位 置 | 

echo "将 指针 移 到 第 2 列 ;<br>"; | 


Sresult->field seek ( 1 ): 1/ 将 当前 列 指针 移 至 第 二 列 〈 默 认 0 代表 第 一 列 ) | 
echo "当前 指针 位 置 : " . $result->current_field . " 列 <br>"; 1/ 打印 当前 列 的 指针 位 置 | 
echo "第 2 列 的 信息 : <br>"; | 
Sfinfo = Sresult>fetch field (); // 获取 当前 列 的 对 象 | 
echo " 列 的 名 称 : " . $finfo->name . "<br>"; 1/ 打印 列 的 名 称 | 
echo "来 自 数据 表 : " . Sfinfo->table . "<br>"; / 打印 本 列 来 自 哪个 数据 表 | 


.429 . 


9 [网 区 设计 与 网 站 妹 设 从 入 门 到 精通 (向 课 精 编 版 ) 


的 // 打印 本 列 中 最 长 字符 囊 长 度 
Sresult->close (); / 关闭 结果 集 释 放 内 存 
$mysqli->close (); / 关闭 与 数据 库 服 务 器 的 连接 
?> 


输出 结果 如 下 所 示 。 


Note 结果 集中 数据 列 个 数 : 2 列 
”默认 当前 列 的 指针 位 置 : 0 列 
| 将 指针 移 到 第 2 列 : 
当前 指针 位 置 ，1 列 
第 2 列 的 信息 : 
| 列 的 名 称 : email 
| 来 自 数据 表 : tb_contact 
| 本 列 最 长 字符 串 的 长 度 15 
< 注意 ;使 用 结果 集 对 象 的 fetch_field0 方 法 ， 只 能 获取 当前 的 列 信息 。 有 关 查 询 结果 更 详细 的 数 
| 据 信息 ， 可 以 通过 对 fetch fields() 方 法 调用 的 结果 进行 分 析 获 得 。 这 个 方法 从 查询 结果 中 
返回 所 有 列 的 信息 ， 保 存在 一 个 对 象 数组 中 ， 其 中 每 一 个 对 象 对 应 一 个 数据 列 的 信息 。 


| 22.4.5 一 次 执行 多 条 SQL 命令 


使 用 mysqli 对 象 的 query0 方 法 每 次 调用 只 能 执行 一 条 SQL 命令 ， 如 果 需 要 一 次 执行 多 条 SQL 
| 命令 ， 就 必须 使 用 mysqli 对 象 的 multi_query0 方 法 。 

| 具体 方法 : 把 多 条 SQL 命令 写 在 同一 个 字符 串 里 作为 参数 传递 给 multi_query0 方 法 ， 多 条 SQL 
| 之 间 使 用 分 号 (;) 分 隔 。 如 果 第 一 条 SQL 命令 在 执行 时 没有 出 错 ， 这 个 方法 就 会 返回 tue， 否 则 将 
| 返回 false。 

因为 multi_query0 方 法 能 够 连接 执行 一 个 或 多 个 查询 ， 而 每 条 SQL 命令 都 可 能 返回 一 个 结果 ， 

”在 必要 时 需要 获取 每 一 个 结果 集 。 所 以 对 该 方法 返回 结果 的 处 理 也 有 了 一 些 变 化 , 第 一 条 查询 命令 的 
| 结果 要 用 mysqli 对 象 的 use_result0 或 store_result0 方 法 来 读 取 。 当 然 ， 使 用 store_result0 方 法 将 全 部 
结果 立刻 取 回 到 客户 端 ， 这 种 做 法 效率 更 高 。 

| 另外 ， 可 以 用 mysqli 对 象 的 more_results0 方 法 检查 是 否 还 有 其 他 结果 集 。 如 果 想 对 下 一 个 结果 
| 集 进行 处 理 ， 应 该 调用 mysqli 对 象 的 next_result0 方 法 ， 获 取 下 一 个 结果 集 。 这 个 方法 返回 tue (有 
| 下 一 个 结果 ) 或 false (没有 下 一 个 结果 )。 如 果 有 下 一 个 结果 集 ， 也 需要 使 用 use_result0 或 store_resultO 
| 方法 来 读 取 。 

| 【示例 】 下 面 示例 设计 了 3 条 SQL 命令 ， 分 别 用 于 设置 结果 字符 集 ， 查 询 当前 用 户 名 ， 以 及 从 
tb_contact 表 中 第 一 条 开始 查询 两 条 记录 。 


<?php 
| / 省 略 数据 库 连 接 代码 ， 请 参考 前 面 示例 
| 人 # 将 3 条 SQL 命令 使 用 分 号 (;) 分 隔 , 连接 成 一 个 字符 串 */ 


| Squery = "SET NAMES utf8:"; / 设置 查询 字符 集 为 UTF8 

| Squery = "SELECT CURRENT USERO:": /1/ 从 MySQL 服务 器 获取 当前 用 户 
| $query = "SELECT name,phone FROM tb_contact LIMIT 0,2"; / 从 tb _contact 表 中 读 取 数据 

| if ($mysqli->multi query ($query )) { / 执行 多 条 SQL 命令 

| do{ 

| if ($result = $mysqli->store result O) { / 获取 第 一 个 结果 集 
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while ( Srow = Sresult->fetch row 0 ) { ” // 遍历 结果 集中 每 条 记录 


foreach ( Srow as $data ) { / 从 一 行 记录 数组 中 获取 每 列 数据 | 
echo $data . "&nbsp;&nbsp;"; ”// 输出 每 列 数据 | 
} | 
echo "<br>"; / 输出 换行 符号 | 估 站 
} Wms 
Sresult->close (); / 关闭 一 个 打开 的 结果 集 Note 
} | 
让 (Smysqli->more results ()) { / 判断 是 否 还 有 更 多 的 结果 集 
人 // 输出 一 行 分 隔 线 
jelsef / 如 果 没 有 更 多 的 结果 集 ， 将 跳出 循环 
break 
} while ( $mysqli->next result () ); / 获取 下 一 个 结果 集 ， 并 继续 执行 循环 
} 
Smysqli->close (); // 关闭 mysqli 连接 
?> 
输出 结果 如 下 所 示 。 
root@localhost 


张 三 13522228888 
李 四 13501681234 


4 注意 在 上 面 示例 中 ， 使 用 mysqli 对 象 的 multi_query0 方 法 一 次 执行 3 条 SQL 命令 ， 获 取 多 个 ， 
结果 集 并 从 中 遍历 数据 。 如果 在 命令 的 处 理 过 程 中 发 生 了 错误 , multi query0 和 next result() | 
方法 就 会 出 现 问 题 。multi_query0 方 法 的 返回 值 ， 以 及 mysqli 的 属性 errmo、error、info 等 | 
只 与 第 一 条 SQL 命令 有 关 ， 无 法 判断 第 二 条 及 以 后 的 命令 是 否 在 执行 时 发 生 了 错误 。 所 ， 
以 在 执行 multi query() 方 法 的 返回 值 是 true 时 ， 并 不 意味 着 后 续 命令 在 执行 时 没有 出 错 。 


225 案例 实战 


本 例 设计 一 个 电子 公告 管理 模板 ， 利 用 mysqli 扩展 的 过 程式 函数 进行 脚本 设计 。 电 子 公告 栏 主 | 
要 功能 包括 动态 添加 、 修 改 、 删 除 、 查 询 和 浏览 公告 信息 。 | 


< 注意 : 在 练习 之 前 ， 请 确保 db_book_test 数据库 中 是 否 已 安装 本 节 所 用 数据 表 db_board， 如果 没 | 
有 则 使 用 db_book testsql 导入 。 | 


22.5.1 添加 公告 
实现 公告 信息 的 添加 功能 , 主要 


语句 ， 完 成 将 表单 中 的 数据 添加 到 数据 库 中 。 


【操作 步 又】 


到 SQL 的 INSERT 语句 , 使 用 mysqli_query0 函 数 执行 INSERT 


(1) 在 网 站 根 目录 下 新 建 board 文件 来， 把 board 文件 夹 作 为 本 例 的 根 目录 。 LL 
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| (2) 新 建 index.php 文件 ， 在 首页 导航 栏 中 为 “添加 公告 ”定义 导航 链接 ， 链 接 到 addphp 文件 。 

| 为 了 简化 操作 ， 读 者 可 以 直接 复制 本 节 示 例 源码 文件 。 

(3) 新 建 addphp 文件 ， 在 该 页 面 中 添加 一 个 表单 。 在 表单 中 包含 一 个 文本 框 、 一 个 文本 区 域 

及 ， 和 两 个 操作 按钮 ， 其 中 一 个 为 提交 按钮 ， 另 一 个 为 重 置 按钮 。 设 置 <fomm> 标 签 的 action 属性 值 为 
| check addphp， 表 单 结 构 的 代码 如 下 ， 设 计 的 效果 如 图 22.3 所 示 。 


Note <form name="form1" method="post" action="check add.php"> 


<table> <tr> 
<td> 公 告 主题 : </td> 
<td><input name="txt_title" type="text" id="txt_ title" size="40"> * </td> 
</tr><tr> 
<td> 公 告 内 容 : </td> 
<td><textarea name="txt_content" cols="S0" rows="8" id="txt_content"></textarea></td> 
</tr><tr> 
| <td><input name="Submit" type="submit" class="btn grey” value=" 保存 " onClick="return check 
| (forml);"> &nbsp; 
| <input type="reset" name="Submit2" value=" 重 置 "></td> 
</tr> 
</table> 
</form> 


图 22.3 设计 的 添加 公告 表单 


4) 新建 由 connphp 文件 ， 设 计 与 数据 库 的 连接 。 代 码 如 下 ， 在 本 地 测试 时 ， 用 户 需要 修改 
| 其 中 的 用 户 名 和 密码 。 


<?php 
// 用 户 名 为 root， 密 码 为 11111111， 用 户 应 根据 本 地 MySQL 数据 库 登 录 配 置 重新 设置 
$conn=mysqli_connect("localhost","root","11111111") or die(" 数 据 库 服务 器 连接 错误 ".mysqli_error0);// 连接 MySQL 
mysqli_select_db($conn,"db_book test") or die(" 数 据 库 访 问 错误 ".mysqli_error0); 

// 选择 数据 库 
mysqli_query($conn, "set names utf8"); / 设置 查询 结果 集 的 字符 编码 

Wy: 


| (5) 新 建 check_add.php 文件 , 对 表单 提交 的 信息 进行 处 理 。 首先 , 连接 数据 库 服务 器 和 数据 库 ， 
”设置 数据 库 编码 格式 ， 然 后， 通过 POST 方法 获取 表单 提交 的 信息 ， 最 后 把 表单 信息 编写 为 SQL 字 
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符 串 ， 并 使 用 INSERT 语句 把 表单 提交 的 信息 写 入 MySQL 数据 库 。 


<?php 


include_once("db_conn.php"); / 导入 数据 库 连接 文件 

qtitle=$_ POST['txt title]; / 获取 标题 信息 会 内 

$content=$_ POST['txt_content]; / 获取 内 容 信息 一 天 

Screatetime=date("Y-m-d H:i:s"); / 设置 插入 时 间 

$sql=mysqli_query($conn, "insert into tb_board(title,content,createtime) values('$title','$content','$createtime')"); 
// 执行 插入 操作 | 

if(ssqD){ | 

echo "<script>alert(' 公 告 添 加 成 功 ");window.location href='add.php':</script>"; 

} 

mysqli_ free_result($sql); / 关闭 记录 集 

mysqli_close($conn); / 关闭 数据 库 连 接 

和 


在 上 面 的 代码 中 ，date0 函 数 用 来 获取 系统 的 当前 时 间 ， 内 部 的 参数 用 来 指定 日 期 时 间 的 格式 ， | 
这 里 需要 注意 的 是 字母 阳 要 求 大 写 ， 它 代表 时 间 采 用 24 小 时 制 计 算 。 在 公告 信息 添加 成 功 后 ， 使 用 | 
Javascript 脚本 弹出 提示 对 话 框 ， 并 在 Javascript 脚本 中 使 用 window.location.href='add.php' 重 新 定位 到 
公告 信息 添加 页 面 。 


22.5.2 ”查询 公告 


实现 添加 公告 信息 后 ， 下 面 来 浏览 和 查询 公告 信息 ， 本 例 使 用 SELECT 语句 动态 检索 数据 库 中 | 视频 讲解 
的 公告 信息 ， 使 用 mysqli_query0 函 数 执行 SELECT 查询 语句 ， 使 用 mysqli_fetch_object0 函 数 获 取 查 
询 结 果 ， 通 过 do...while 循环 语句 输出 查询 结果 。 
【操作 步骤 】 
(1) 新 建 menuphp 文件 ， 把 22.5.1 节 示 例 中 的 左 侧 导航 内 容 复制 到 menu.php 文档 中 ， 文 档 内 
容 不 包含 完整 的 HTML 结构 信息 ， 仅 包含 导航 结构 信息 。 在 menu.php 文档 中 定义 两 个 热点 链接 ， 分 
别 链接 到 add.php 和 search.php 文件 。 
<map name="Map"> 
<area shape="rect" coords="30,45,112,63" href="add.php"> 
<area shape="rect" coords="29,71,114,90" href="search.php"> 
</map> 
(2) 分 别 在 index.php、add.php 文档 中 使 用 include0) 函 数 包含 menu.php 文件 。 
<?php include("menu.php");?> 


(3) 新 建 searchphp 文件 ， 在 该 页 面 中 添加 一 个 查询 表单 ， 表 单 中 包含 一 个 搜索 文本 框 和 一 个 
提交 按钮 ， 表 单 结构 代码 如 下 所 示 。 
<form name="forml" method="post" action=""> | 
查询 关键 字 &nbsp; <input name="txt_keyword" type="text" id="txt_keyword" size="40"> 
&nbsp; <input type="submit" name="Submit" value=" 搜 索 " onClick="return check(form)"> 
</form> 


添加 表单 验证 代码 ， 防 止 用 户 随意 输入 字符 或 者 空 提交 查询 。 


<script> 
function check(form){ 
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| BS 
这 form txt keyword.value—""){ 
alert(" 请 输入 查询 关键 字 !"):form.txt_ keyword.focusO:retum false:; 
form.submit(); 


} 
</script> 


于 


当 单 击 “ 保 存 ” 按 钮 时 ， 将 调用 该 函数 ， 用 来 检测 文本 框 中 的 信息 是 否 为 空 。 
| (4) 在 文档 中 添加 如 下 PHP 和 HIML 混合 代码 ， 在 PHP 脚本 中 连接 数据 库 ， 设 置 数据 库 的 编 
| 码 格式 为 UTF8。 通过 POST 方法 获取 表单 提交 的 查询 关键 字 , 通过 mysqli_query0 函 数 获取 执行 模糊 
”查询 ， 通 过 mysqli_fetch_object0 函 数 获取 查询 结果 ， 通 过 do...while 循环 语句 把 查询 结果 输出 显示 ， 
， 最 后 关闭 记录 集 和 数据 库 连 接 。 
| <?php 
if (isset( $ POST['txt keyword] )) { 

include_once("db_conn.php"); 

Skeyword=$_ POSTI['txt_keyword']; 
| $sql=mysqli query($conn,"select * from tb board where title like '"%S$keyword%' or content like 
| %6SKeyword9%b; 
| $row=mysqli fetch_object($sq)); 

if(!Srow){ 

echo "<font color='red> 您 搜索 的 信息 不 存在 ， 请 使 用 类 似 的 关键 字 进行 检索 !</font>"; 
}else{ 


?> 
<table class="table"> 
<tr> 
<th width="221"> 公 告 标题 </th> 
<th width="329"> 公 告 内 容 </th> 
</tr> 
<?php 
dof 
?> 
<tr bgcolor="#FFFFFF"> 
<td><?php echo $row->title:?></td> 
<td><?php echo $row->content;?></td> 
</t> 
<?php 
}while($row=mysqli_fetch_object($sq))): 
mysqli_free_result($sq)D); 
mysqli_close($conn); 


> 
</table> 
<2php 
} 
} 
?> 


1 


| (5) 在 正 浏 览 器 中 输入 http://localhost/board/searchphp， 按 Enter 键 即 可 看 到 所 有 的 公告 信 
| 在 搜索 文本 框 中 输入 关键 字 ， 然 后 单 击 “ 搜 索 ” 按 钮 ， 在 页 面 底部 会 自动 显示 搜索 的 相关 公告 信 
”如 图 22.4 所 示 。 


息 
所 
息 
所 、 
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图 22.4 搜索 公告 信息 


22.5.3 更 新 公告 


在 添加 公告 信息 之 后 ,可 能 需要 对 公告 内 容 进行 再 次 编辑 ,为 此 本 节 讲 解 如 何 添加 更 新 公告 内 容 | 
的 功能 。 | 
【操作 步骤 】 
(1) 打开 menu.php 文档 ， 添 加 如 下 热点 链接 ， 以 便 导 航 到 update.php 文档 中 。 
<map name="Map"> 
<area shape="rect" coords="27,122,113,141" href="update.php"> 
</map> | 
(2) 新 建 update.php 文件 ， 在 该 页 面 中 使 用 SELECT 语句 检索 全 部 的 公告 信息 ， 并 通过 表格 结 
构 显 示 出 来 ,然后 为 每 条 记录 绑 定 一 个 编辑 图 标 ， 为 该 图 标 添加 超 链 接 ,链接 到 modify.php 文档 ， 演 | 
示 代 码 如 下 所 示 。 | 
<a href="modify.php?id=<?php echo $row->id;?>"> 
<img src="images/update.gif" width="20" height="18" border="0"> 
</a> | 
(3) 新 建 modifyphp 文件 ， 在 该 文档 中 实现 对 update .php 文件 传递 过 来 的 id 值 所 对 应 的 记录 进 
行 编辑 。 首 先 ， 完 成 数据 库 的 连接 ， 并 根据 超 链接 传递 过 来 的 id 值 ， 从 数据 库 中 找到 对 应 的 记录 。 


<?php 

让 (1!isset($_ GET["id"] ) ){ 
echo"<script>alert(' 你 没有 选择 操作 记录 。");</script>"; 

}else{ 
include_once("db_conn.php"); 
$id=$_ GET["id"]; 
$sql=mysqli_query($conn,"select * from tb_board where id=$id"); 
Srow=mysqli_fetch_object($sq)l); 


2 | 
(4) 在 页 面 中 添加 表单 结构 ， 并 把 对 应 的 字段 值 绑 定 到 文本 框 和 文本 区 域 中 ， 同 时 添加 一 个 隐 | 
藏 域 、 提 交 按 钮 和 重 置 按钮 ， 设 置 <form> 标 签 的 action 的 属性 值 为 check_modify.php 文档 。 


<form name="forml" method="post" action="check_modify.php"> 
<table> 
<tr> 
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<td> 公 告 主 题 : </td> 
<td><input name="txt title" type="text" id="txt title” size="40" value="<?php echo $row->title;?>"> 
<input name="id" type="hidden" value="<?php echo Srow->id:?>"></td> 
</tr> 
<tr> 
<td> 公 告 内 容 : </td> 
<td><textarea name="txt_content" cols="50" rows="8" id="txt_content"><?php echo $row->content;?> 
| </textarea></td> 
| </t> 
<tr> 
<td><input name="Submit" type="submit" class="btn_grey" value=" 修 改 " onClick="retum check(forml):"> 


&nbsp; 
<input type="reset" name="Submit2" value=" 重 置 "></td> 
</tr> 
</table> 
</form> 


| (5) 新 建 check_modify.php 文档 。 设 计 在 index.php 页 面 单 击 编辑 公告 超 链接 ， 进 入 update.php 
| 页 面 ， 在 该 页 面 中 单 击 其 中 任意 一 条 公告 信息 后 的 编辑 图 标 ， 进 入 modify.php 页 面 ,在 该 页 面 显示 指 
定 的 公告 信息 ， 并 被 绑 定 到 表单 域 中 ， 此 时 用 户 即 可 对 其 进行 编辑 ， 编 辑 完毕 ， 最 后 单 击 “ 修 改 ” 按 
钮 ， 由 check_modifyphp 文档 负责 把 编辑 后 的 信息 重新 写 入 数据 库 中 ， 实 现 对 数据 的 更 新 操作 ， 运 行 
结果 图 如 图 22.5 所 示 。 


<?php 
include_once("db_conn.php"); 
| $title=$_ POST["txt title"]; 
| S$content=$_POST["txt_content"]; 
| S$id=$_POST["id"]; 
| S$sql=mysqli_query($conn,"update tb_board set title='$title',content='$content' where id=$id"); 
| 这 $sqj{ 
| header("Location:update.php"); 
| }else{ 
echo "<script>alert(' 公 告 信息 编辑 失败 ! "):history.back();window.location.href='modify.php?id=Sid';</script>"; 


图 22.5 更 新 公告 信息 
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22.5.4 删除 公告 


| 回 
如 果 公告 信息 已 经 不 再 需要 ,或 者 添加 错误 的 公告 信息 ， 则 应 该 把 它 删除 掉 。 下 面 利用 DELETE 《视频 讲解 
语句 ， 根 据 指定 的 id 值 ， 动 态 删 除数 据 库 中 指定 的 公告 信息 。 | 铬 | 
【操作 步骤 】 | 
(1) 在 菜单 导航 中 添加 删除 操作 的 热点 链接 ， 并 链接 到 delete .php 文件 。 Note 


(2) 新 建 delete.php 页 面 ， 在 该 页 面 中 使 用 SELECT 语句 检索 出 全 部 的 公告 信息 ， 使 用 do...while | 
循环 语句 通过 表格 形式 输出 显示 ， 并 在 每 条 记录 后 面 添加 一 个 单元 格 , 插入 一 个 删除 图 标 ， 并 为 图 标 | 
定义 超 链 接 ， 链 接 到 check_del.php 文件 ， 将 公共 信息 的 id 值 绑 定 到 参数 中 ， 其 关键 代码 如 下 所 示 。 

<a href="check del.php?id=<?php echo Srow->id:?>"> 
<img src="images/delete.gif' width="22" height="22" border="0"> 
</a> | 

(3) 新 建 check_del.php 文件 ， 在 该 文档 中 根据 超 链接 传递 过 来 的 id 值 ， 执 行 DELETE 删除 语 | 

句 ， 删 除数 据 表 中 指定 的 公告 信息 ， 具 体 代码 如 下 所 示 。 | 


<?php 
include_once("db_conn.php"); 
$id=$_GET["id"]; 
$sql=mysqli_query($conn, "delete from tb_board where id=$id"); 
这 $sqj{ 
echo "<script>history.back();window.location.href='delete.php?id=$id';</script>"; 
Jelse{ | 
echo "<script>alert(' 公 告 信息 删除 失败 !");history.back0:window.location.href='delete.php?id=$id';</script>"; | 


} 
> | 
于 该 页 面 是 动态 代码 ， 没 有 指定 编码 格式 ， 当 在 浏览 器 中 浏览 时 ， 会 出 现 乱码 现象 ,为 了 解决 
这 个 问题 ， 可 以 在 页 面 中 显 式 添加 编码 格式 。 

<meta http-equiv="Content-Type" content="text/html:; charset=utf-8"> 

(4) 运行 示例 ， 在 index.php 页 面 中 单 击 删除 公告 信息 超 链接 导航 ， 打 开 delete.php 页 面 ， 在 该 
页 面 中 单 击 每 一 条 公共 信息 后 的 删除 图 标 ， 就 会 弹出 一 个 提示 对 话 框 ， 单 击 “ 确 定 ”按钮 ， 完 成 对 指 
定 的 公告 信息 删除 操作 ， 如 图 22.6 所 示 。 
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图 22.6 删除 公告 信息 
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22.5.5 ”分 页 显示 


人 | 当 添 加 的 公告 信息 很 多 时 ， 在 一 页 中 显示 会 影响 浏览 ， 为 了 方便 用 户 快速 浏览 公告 信息 ， 可 以 把 
及 | 公告 信息 进行 分 页 显示 。 
【操作 步 又】 


(2) 新 建 page.php 页 面 , 在 该 页 面 中 使 用 SELECT 语句 检索 出 全 部 的 公告 信息 , 使 用 do...while 
循环 语句 通过 表格 形式 输出 显示 ， 具 体 代码 如 下 所 示 。 
<?php 
include_once("db_conn.php"); 
店 ”Spage 为 当前 页 ， 如 果 $page 为 空 ， 则 初始 化 为 1 */ 
if (isset( $_GET["page"] )) 
Spage = $_GET["page"]; 


else 
Spage=""; 
if (Spage—""){ 
Spage=1;} 
if (is numeric($Spage){ 
Spage_size=5; // 每 页 显示 5 条 记录 
Squery="select count(*) as total from tb_board order by id desc"; 
Sresult=mysqli_query($conn, $query); // 查询 符合 条 件 的 记录 总 条 数 
$message_count=mysqli_fetch_array($result); / 获取 当前 记录 
Smessage_count=$message_count[0]; / 要 显示 的 总 记录 数 
/ 根据 记录 总 数 除 以 每 页 显示 的 记录 数 求 出 所 分 的 页 数 
Spage_count=ceil($message_count/$page_size); 
Soffset=($page-1)*$page_ size; / 计算 下 一 页 从 第 几 条 数据 开始 循环 
S$sql=mysqli_query($conn, "select * from tb_board order by id desc limit $offset, $page_size"); 
Srow=mysqli_fetch_object($sqD); 
if(!$row){ 
echo "<font color='red> 暂 无 公告 信息 !</font>"; 
} 
dof 
?> 
<tr bgcolor="#FFFFFF"> 
<td><?php echo $row->title:?></td> 
<td><?php echo $row->content:?></td> 
</tr> 
<?php 
}while($row=mysqli_fetch_object($sq])); 
| } 
| ?> 
| (3) 在 页 面 底 部 添加 分 页 导航 信息 和 导航 超 链 接 ， 具 体 代 码 如 下 所 示 。 
”<!- 翻 页 条 -> 


| <td width="37%">&nbsp;&nbsp; 页 次 : <?php echo $Spage;?>/<?php echo $Spage_count;?> 页 &nbsp; 记 录 : <?php 
| echo $message_count;?> 条 &nbsp; </td> 
| <td width="63%" align="right"><?php 
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人 # 如 果 当 前 页 不 是 首页 */ 
if($page!=1D){ 
人 # 显示 “首页 ” 超 链接 */ 
echo "<a href=page.php?page=1> 首 页 </a>&nbsp;"; 


* 显示 “上 一 页 ” 超 链接 岂 会 内 
echo "<a href=page.php?page=".($page-1)."> 上 一 页 </a>&nbsp;"; ee 
/* 如 果 当前 页 不 是 尾 页 4/ NEE 


这 $page<$page count{ 
人 # 显示 “下 一 页 ” 超 链接 */ 
echo "<a hre 人 page php?page=".(Spage+l)."> 下 一 页 </a>&nbsp:"; 
/# 显示 “ 尾 页 ” 超 链接 */ 
echo "<a href=page.php?page=".$page_count."> 尾 页 </a>"; 
} 
mysqli_ free_result($sql); 
mysqli_close($conn); 
?> 


(4) 运行 示例 ， 在 index.php 页 面 中 单 击 分 页 公告 信息 超 链接 导航 ， 打 开 page.php 页 面 ， 在 该 页 
面 中 单 击 底部 的 分 页 超 链接 文本 ， 可 以 快速 浏览 不 同 页 面 信息 ， 如 图 22.7 所 示 。 


图 22.7 分 页 显示 公告 信息 


22.6 在 线 练 习 


22.5 节 以 mysqli 扩展 的 过 程式 函数 编写 了 一 个 综合 案例 ， 设 计 思 路 和 代码 风格 采用 传统 模式 。 


兴趣 的 同学 可 以 扫 码 系统 学 习 ， 以 巩固 本 章 所 学 的 知识 。 
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综合 案例 : 设计 技术 论坛 


随 着 互联 网 的 发 展 ， 网 络 信息 不 断 丰 富 ， 以 动态 性 和 交互 性 为 特征 的 论坛 是 一 种 比较 实 
用 的 信息 交流 方式 ， 其 表现 形式 多 种 多 样 ,有 个 人 论坛 、 平 台 论 坛 、 技 术 论坛 和 轿子 论坛 等 ， 
虽说 名 目 众 多 ， 但 都 在 国 绕 着 一 个 “ 论 ” 字 进行 设计 ， 技 术 原 理 基本 相同 ， 多 许 网 友 发 布 个 
人 意见 和 看 法 。 本 章 将 详细 讲解 论坛 的 开发 流程 和 关键 技术 


【 学 习 重 点 】 


| 


至 至 吾 


能 够 开发 一 个 功能 完善 的 在 线 论坛 
增添 主题 导航 

设计 帖子 置顶 、 引 用 、 收 藏 
设计 回帖 异 蔽 、 无 刷新 交流 
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23.1 设计 思路 


下 面 简 单 分 析 一 下 本 例 论坛 的 设计 思路 和 数据 结构 的 构建 。 
23.1.1 设计 流程 


子 引用 、 帖 子 收藏 和 屏蔽 帖子 等 特殊 功能 ， 以 及 一 些 辅助 的 功能 ， 包 括 我 的 信息 、 


我 的 好 友和 我 参与 
的 帖子 等 。 为 了 便于 对 论坛 进行 管理 ， 增 加 了 管理 员 管理 论坛 的 功能 ， 包 括 发 布 帖子 、 回 复 帖子 、 帖 
子 类 别 和 置顶 帖子 以 及 数据 的 备份 和 恢复 等 内 容 。 根 据 上 述 的 功能 描述 ,整理 出 论坛 模块 的 功能 结构 
图 ， 如 图 23.1 所 示 。 然 后 根据 功能 结构 图 中 描述 的 功能 ， 设 计 了 一 个 完整 的 论坛 模块 的 开发 流程 ， 
如 图 23.2 所 示 。 


视频 讲解 


| 发布 帖子 | | “收藏 帖 子 | 相关 帖子 


洱 峙 嗪 


会 公告 管 帖子 管理 


图 23.1 论坛 模块 的 功能 结构 图 


23.1.2 ”数据 结构 设计 


论坛 的 功能 完善 与 否 ， 数 据 库 的 运用 是 一 个 决定 性 的 因素 。 


论坛 的 功能 才能 够 展现 ， 


否则 它 将 和 留言 簿 没什么 


区 别 。 


只 有 拥有 一 个 强大 的 数据 库 的 支持 


本 论坛 中 使 用 的 是 一 个 名 称 为 db_forum 的 数据 库 ， 在 该 数据 库 中 有 9 个 数据 表 。 有 关 数 据 表 名 


称 及 表 功 能 的 介绍 如 图 


23.3 所 示 。 


下 面 对 数据 库 中 几 个 相对 比较 复杂 的 数据 表 的 功能 和 结构 进行 介绍 。 
回 tb _forum user 数据 表 ， 用 于 存储 用 户 的 注册 信息 。 其 中 包括 13 个 字段 ， 字 段 属性 的 说 明 如 
图 23.4 所 示 。 
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— TT Ey 


| 
| 有 结构 司 SQL 也 搜索 查询 避 呈 加 SA 凡 损 作 a 权限 只 程序 回 事 件 汪 触 发 如 吧 设计 器 
| 
| 


表 操作 行 教 吧 类 型 ”排序 规则 大 小 多 余 


| 口 也 forum_affiche 。 傅 国 浏览 失范 构 号 扫 索 有 托 入 刍 清 宇 @ 出 1 MyISAM gb2312_chinese cl 2.1 KB 60 字 节 
口 也 forum big_ype 请 是 浏 攻 基 结构 包 执 索 驰 括 入 终 青 宇 加 出 6 MyISAM gb2312_chinese_ci 2.1 FB 20 字 节 
| 口 也 forum restoe 食 加 浏览 9 结构 全 搜索 乱 括 入 旦 青空 @ 出 从 29 MyISAM gb2312_chinese_ci 4 KB 132 字 节 
| 口 由 forum send 请 中 济 司 因 革 构 包 措 索 怠 括 和 刍 青 宇 加 恒生 。。31 MyISAM gb2312_chinese_ci 7.6 KB 694 字 节 
口 由 -forum_smalliype 请 固 浏览 3% 针 构 号 要 索 乳 托 入 铬 清 宇 @ 多 6 MyISAM gb2312_chinese_d 。 2.2 KB 44 字 节 
| Db forum user 请 门 浏览 jr 结构 所 搜索 敢 括 入 刍 青 宇 出 放 5 MyISAM gb2312 chinese dl 。 3 KB 292 字 节 
| 口 由 mailbox 请 目 浏览 天 结构 辐 搜 索 屠 括 入 锯 青 宇 加 测 尘 12 MyISAM gb2312 chinese ci 2.6 KB 

| 口 也 my_collection 将 口 浏览 jr 车 构 所 搜索 匡 括 和 刍 青 宇 加 出 了 7 MyISAM gh2312 chinese cl 5.5 FB 352 字 节 
口 也 -my_ffiend 高 目 浏 览 缠 结 构 号 搜索 卫 括 和 鼎 青 空 @ 出 除 7 MyISAM gb2312_chinese ci 2.2 KB 20 字 节 
| 9 张 表 总 计 104 gh2312 chinese_ci 29.4 m 1.6 FB 


图 23.3 设计 数据 库 结构 


回 tb _forum send 数据 表 ， 用 于 存储 论坛 中 发 布 帖 子 的 数据 。 其 中 包括 11 个 字段 ， 字 段 属性 的 
说 明 如 图 23.5 所 示 。 

tb forum restore 数据 表 ， 用 于 存储 论坛 中 回复 帖子 的 数据 。 其 中 包括 7 个 字段 ， 参 数 说 明 

| 如 图 23.6 所 示 。 

tb_my_collection 数据 表 ， 用 于 存储 用 户 收 藏 的 帖子 。 其 中 包括 7 个 字段 ， 各 个 字段 属性 的 

| 说 明 如 图 23.7 所 示 。 

| 在 本 模块 中 包括 9 个 数据 表 ， 由 于 篇 幅 所 限 ， 这 里 只 介绍 了 其 中 4 个 相对 比较 复杂 的 数据 表 ， 有 
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周济 牙 结 均 加 SQL 对 交 来 怠 拖 NA 豆 SU 局 SA = 极限 吻 是 

人 # 和 名字， 大 型 担 序 规则 必 性 空 对 这 番外 时 名字， 类 型 持 床 规则 属性 空 黑 认 骆 外 
tb forum id 局 0) 否 至 AUTOINCREMENT 启 1 由 send 有 与 ak10) 于 到 AUTO JINCREMENT 
om user varchar(50) gh2312 chinese G 。 天正 襄 2 由 send subjoct varchars0) qh23l2 cinese 4 机 到 

3 form use varchar(50) gb2312 chinese d 五 无 三 3 也 send_content mediomtox gb2312 chinese df 要 天 
tb forum gpe varchar50) gb2312 chinese dG 。 否 天 上 4 由 send usor a 
站 onm_emai varchar(50) gb2312 chinese d 天 天 让 send_dam datelime EE 

6 也 forum truopass varchar(5D) gb2312 chinese_ ci 否 下 百 6 由 send_picrure varchar(T0) gh2312_chinese_d Ve 
7 th forum dato datotime 否 到 7 send ype varchar(50) gb2312_chinese_d 。 否 无 
a 8 th_forum _picturo varchar(80) gb2312 chinese ci 否 于 百 6 tb send types Yarchar(50) gu2312 chinese di [ 
9 th forum grade varchar50) gb2312_chinese dG 。 否 天 9b send small ype varchar50) qh2312 cinese d 五 王 
D0 th forum poss_problem vachar5n) sb2312 chinese 否 天 10 由 send gpe_distilate varcharfs0) gb2312 chinese d= 是 NULL 
forum_pass_rooul varchar50) gb2312 chinese_d 。 否 天 1 tb_sond_ ypo_hotapot varchar[50) ge2312_chinose d 是 NULL 
tb forum qq varchar50) gb2312 chinese di 否 王 [2 sond_accossorios varcharl80) gs2312 chinese di 二 NULL 
tb forum specially lext gh2312 chinese di 。 否 无 th tomm end ao) 好 0 

图 23.4 tb_forum_user 数据 表 图 23.5 tb_forum send 数据 表 


wt? EF db lo 
4 络 攀 回 SQL 和 拆 安 驻 括 A 局 


# 名 字 类 型 排序 规则 属性 空 黑 认 态 外 ahosi bu + 二 二 my coleciow | 
etoro din) 天 二 AUTOINCRENENT er | 
口 2 trestor subject 。 varchar50) sh212 chinese di 。 百 到 ns i i i | 
D3 Wrestore content 。 medumlen gb2312_chinese dl 否 无 口 1 由 colectoa MP Cit0) 否 示 AUTO_INCREMENT | 
D4 tbrostore_user varchar(s0) gb7312 chinese_ci 。 五 王 口 2 由 collection_subject verchar50) gb2312 chinese ca 梧 却 | 
口 由 sond_id int10) 下 于 口 3 由 .coliecton_address varcharf150) gu2312 chinese ol 百 元 | 
DS threstore date din 吾 丐 口 4 由 eolecion abel varcharfs0) gh2312.chinese d 。 百 去 | 
7 由 fonm_coums varchar(50) gb2312_chinese_cl 五 0 en ci pe 下 协 | 
站 § th rotoro_accossorios varchar(s0) eb2312 chinese cf 是 MLL 口 Stbcolecton user -vadhal(0) shzat2 dinese 5 至 元 | 
口 9 由 restom tog in10) 百 0 口 7 tbcolection date cataime 否 天 | 

| 

图 23.6 tb_forum_restore 数据 表 图 23.7 tb_my_collection 数据 表 | 

23.2 案例 预览 

在 具体 学 习 之 前 , 用 户 有 必要 先 借助 本 书 完成 源 代码 体验 网 站 运行 的 整体 效果 ,为 具体 实践 葛 定 | 
扎实 的 感性 基础 。 
人) 注意 ; 本 章 和 案例 涉及 PHP 文件 将 近 有 80 多 个 ， 用 户 在 代码 阅读 和 上 机 练习 时 主要 以 源 代码 为 准 ， 
本 章 内 容 仅 简单 介绍 网 站 设计 的 思路 ， 以 及 部 分 技术 要 点 ， 所 显示 的 代码 仅 是 局 部 文件 和 ， 

【操作 步骤 】 

(1) 附加 MySQL 数据 库 。 在 本 书 源 代码 目录 中 ， 将 本 章 实例 子 目录 下 database 文件 夹 中 的 

db forum 文件 夹 复制 到 MySQL 配置 文件 myini 中 定义 的 数据 库存 储 目录 中 , 具体 位 置 应 根据 同学 们 ， 
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BE MySQL 时 设置 的 位 置 而 定 。 
#Ppath to the database root 
datadir="C:/ProgramData/MySQL/MySQL Server 5.7/Data/" 
a (2) 将 程序 发 布 到 PHP 服务 器 站 点 根 目录 下 。 具 体位 置 应 根据 同学 们 在 安装 Apache 时 设置 而 
| 定 ， 即 在 httpd 配置 文件 中 定义 的 站 点 文档 位 置 。 
(3) 打开 下 浏览 器 ， 在 地 址 栏 中 输入 http://127.0.0.1/index.php 或 者 http://localhost/index.php， 
| EE 可 预览 本 站 效果 。 后 台 管 理 需要 访问 http://127.0.0.1/admin/index.php。 


痊 提示 : 在 地 址 栏 中 输入 的 127.0.0.1 的 默认 端口 号 为 80， 在 安装 Apache 服务 器 时 如 果 端 口号 采 
用 不 是 默认 设置 ,而 是 用 户 自 定义 的 ( 如 8080), 那么 需要 在 地 址 栏 中 输入 127.0.0.1:8080， 
即 可 正确 运行 程序 。 


本 程序 提供 了 两 个 系统 模块 ， 一 个 是 前 台 会 员 交 流 模块 ， 另 一 个 是 后 台 管 理 员 管理 模块 。 
回 ”前台 主 界面 如 23.8 所 示 。 首 先 单 击 “ 注 册 ” 按 钮 ， 注 册 用 户 名 和 密码 ， 然 后 进行 登录 ， 即 
可 发 表 帖 子 、 回 复 帖子 、 加 好 友 、 给 好 友 发 送 短信 等 操作 。 


四 -| 号 peconoxw 


Wu 
用 户 昭 称 : adaia 个 人 信息 今天 是 : 2018-08-11 我 萝 与 的 引子 ”我 93 帖子 ”我 的 收藏 也 好友” 我 的 信箱 iE 前 页 退出 后台 管理 


I 

2 和 分 丙 如 和 全! 
EL 

而 维护 

”HE 

操作 系统 


和 et 人 


理工 Er 机 * 他 们 申 中 国 第 一 批 互 除 
py Er 也 开始 从 中 关 村 |- a 


[团购 ]8. 本 11 证 
目 -可 时 间 : 8.5-& Ey 
》 [海外 学 人 ] 海归 半年 的 感受 zz(e3) 和 


》 [ 窜 奋 生 务 ] 结 妖 了 但 还 站 不 了 10 杀 年 前 的 初恋 45) [ 访 产 装 个 ] 


pe 人 访 窜 16919 人 。 
Teaa@200s-20L6. S55 Der TeasC2D1l-20lE 
re 


图 23.8 程序 前 台 主 界面 


所 有 注册 的 用 户 都 是 会 员 , 会 员 可 以 发 表 及 回复 帖子 ， 并 可 修改 及 删除 自己 的 帖子 。 本 论坛 只 有 
一 个 版 主 (用户 名 admin， 密码 admin), 版 主 可 以 对 论坛 中 所 有 的 帖子 进行 删除 。 一 个 管理 员 (用 户 
| 名 admin， 密码 admin)， 管 理 员 具有 所 有 权限 。 读 者 可 以 在 后 台 修 改 用 户 权 限 。 
回 版 主 登 录 处 和 会 员 登 录 一 样 。 管 理 员 登录 需要 在 前 台 首 页 地 址 后 加 admin 
(http:/127.0.0.1/admin/) ， 即 可 进入 后 台 登 录 页 面 ， 如 图 23.9 所 示 。 输 入 管理 员 用 户 名 、 
密码 及 验证 码 ， 单 击 “ 登 录 ” 按 钮 ， 进 入 后 台 主 页 面 。 
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图 23.9 后 台 主 页 面 


23.3 难点 详解 


在 论坛 模块 的 开发 过 程 中 ， 用户 应 该 掌握 关键 技术 ， 只 有 这 样 才能 够 完成 本 论坛 的 开发 。 下 面 就 | 
对 论坛 中 用 到 的 关键 技术 进行 详细 介绍 。 


23.3.1 置顶 帖子 


帖子 置顶 就 是 将 指定 的 帖子 在 网 页 的 最 上 方 显示 , 用 于 突出 帖子 的 特殊 性 。 只 有 管理 员 拥有 帖子 
置顶 的 权限 ， 其 他 任何 人 都 不 具备 这 个 权限 。 帖 子 置顶 操作 过 程 如 图 23.10 所 示 。 


和 mm 


if | 
wna: DB) DI 可 Be a se I) se sum 


图 23.10 置顶 帖子 


帖子 置顶 的 操作 原理 ， 根 据 帖 子 的 ID 设置 一 个 超 链接 ， 在 链接 的 penmute_sendphp 文件 中 实现 ， 
帖子 置顶 的 操作 。 


| 
人 


as 445。 


[网 革 设 计 与 网 站 建设 从 入 门 到 精通 ( 币 课 精 编 版 


【操作 步骤 】 
| (1) 在 send_ forum contentphp 文件 中 , 创建 一 个 “置顶 ” 超 链 接 , 链接 的 标识 为 对 应 帖子 的 色 ， 
”链接 到 文件 permute send.php 中 ， 在 该 文件 中 实现 帖子 置顶 的 操作 (send_forum content.php)。 


估 站 | <a href="permute_send.php?permute id=<?php echo Smyrow_3[tb_send id];?>"> 置 顶 </a> 


(2) 创建 permute_send.php 文件 ， 实 现 帖 子 置顶 的 操作 。 首 先 ， 判 断 当前 的 用 户 是 否 是 管理 员 ， 
这 里 用 户 权限 的 设置 是 通过 用 户 信息 表 (tb_forum_ user) 中 也 forum type 字段 的 值 来 控制 的 ， 如 果 
| tb _forum type 的 值 是 1， 则 代表 是 注册 的 会 员 ， 如 果 值 是 2， 则 代表 是 管理 员 。 
| 如 果 当 前 用 户 是 管理 员 ， 将 指定 帖子 的 tb_send_type 字段 的 值 更 新 为 1。 否则 不 执行 更 新 数据 的 
操作， 并且 弹出 提示 信息 “您 不 具备 该 权限 !”， 返 回 到 上 一 页 ， 代 码 如 下 (permute_send .php)。 


<?php session start(); include("conn/conn.php"); 
| $query=mysql query("select * from tb forum user where tb forum user='$ SESSION[tb_ forum user] and 
| tb forum type="2"); 
这 mysql num rows($query)>0){ 
$query=mysql_query("update tb forum send set tb_send type= 1 where tb_send id='$ GET[permute 1d]"); 
if($query—true){ 
echo "<script> alert( 帖 子 置顶 成 功 !); history.back0;</script>"; 
Jelse{ 
echo "<script> alert( 帖 子 置顶 失败 1"); history.back(;</script>"; 


} 
}else{ 

echo "<script> alert(' 您 不 具备 该 权限 1"); history.backQ0;</script>"; 
?> 


帖子 置顶 技术 讲解 完毕 ， 有 关 该 技术 的 完整 应 用 可 以 参考 论坛 模块 中 的 程序 。 
23.3.2 引用 帖子 
帖子 引用 是 指 在 浏览 帖子 时 ， 针 对 某 个 回复 的 帖子 或 者 自己 的 看 法 与 楼 上 的 看 法 相同 ， 此 时 就 可 


以 单 击 引 用 超 链接 ， 直 接 将 楼 上 回复 的 帖子 进行 引用 ， 作 为 自己 的 回复 帖子 进行 提交 。 帖 子 引用 的 操 
| 作 流程 如 图 23.11 所 示 。 


和 i) 


er: B| Z| v3 FelT zs | se use 


ll rn: 区 从 :加 |] 3 村: 加 > 


上 54 人 克基 让 机 二 并 信 , 访 6019 人 > 
red by TP Jere 2016 DS Dev Teene01 -3 


图 23.11 引用 帖子 
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帖子 引用 的 实现 原理 : 首先 , 在 帖子 浏览 的 页 面 中 针对 每 个 回复 的 帖子 设置 一 个 “引用 ” 超 链接 ，， 
这 里 将 其 链接 到 本 页 send_forum contentphp 文件 中 ， 设 置 链接 标识 cite 为 回复 帖子 的 ID， 添 加 锚 点 
bottom; 然后 ， 在 指定 输出 回帖 内 容 的 表格 中 添加 一 个 命名 错 记 ， 实 现 同一 页 面 的 引用 跳 转 ， 最 后 ， | 
在 输出 引用 内 容 的 文本 域 中 ,根据 超 链接 中 传递 的 栏目 标识 ， 从 数据 库 中 读 取 到 指定 的 回帖 数据 , 将 | 
引用 的 内 容 进行 输出 。 [Eee 
【操作 步骤 】 
(1) 创建 引用 的 超 链接 ， 并 且 设 置 链接 的 栏目 标识 cite 和 锚 点 botom， 代 码 如 - F | 


(send forum content.php)。 


<a href="send forum content.php?send big type=<?php echo $ GET[send big typel;?>&&send small type= 
<?php echo $_ GET[send small type];?>&&send id=<?php echo $ GET[send id]:?>&&cite=<?php echo $myrow_4 
[tb_restore_id];?>#bottom"> 引 用 </a> 


(2) 在 指定 的 位 置 设置 一 个 命名 锚 记 。 实 现 同一 页 面 的 跳 转 ， 代 码 如 下 。 
<a name="bottom" id=" bottom"></a> 


(3) 在 要 输出 引用 内 容 的 文本 域 中 进行 编辑 ， 根 据 超 链接 栏目 标识 cite 的 值 ， 从 数据 库 中 读 取 
到 对 应 的 回复 帖子 的 标题 和 内 容 ， 并 且 将 读 取 的 数据 输出 到 文本 域 中 ， 代 码 如 下 。 | 
<?php 
if($_GET[cite]==true){ 
$query=mysql query("select * from tb_forum restore where tb_restore id='$ GET[cite]"); 
Sresult=mysql]_fetch_array($query):; 
echo "摘自 ("$result[tb_restore_user]."): ".Sresult[tb_restore_subject]; 
} 


?> | 
<textarea name="file" cols="70" rows="10" id="file" onKeyDown="countstrbyte(this.form .file,this.form.total,this. | 
form.used,this.form.remain):" onKeyUp="countstrbyte(this form file.this form.total:this.form.used,this.form.remain):"><?php | 
这 $_GET[cite] 一 true){ 
$query=mysql_query("select * from tb_forum restore where tb_restore id=-'$_ GET[cite]”); 
Sresult=mysql fetch_array($query); 
echo $result[tb_restore_content]; 


?></textarea> | 
到 此 帖子 引用 技术 讲解 完毕 ,接着 就 可 以 将 引用 的 内 容 直 接 进行 提交 ， 作 为 自己 的 回复 帖子 ， 有 
关 该 技术 的 完整 应 用 可 以 参考 本 模块 中 的 send_forum contentphp 文件 。 | 


23.3.3 ”收藏 帖子 


帖子 收藏 就 是 将 当前 帖子 的 地 址 完整 地 保存 到 指定 位 置 , 为 以 后 访问 该 帖子 提供 方便 。 帖 子 收藏 | 
的 操作 如 图 23.12 所 示 。 | 
帖子 收藏 实现 的 关键 是 如 何 获 取 当前 页 面 的 完整 地 址 。 获取 当前 页 面 的 完整 地 址 主要 应 用 的 是 服 
务 器 变量 $ -SERVER， 关 键 代 码 如 下 〈send_forum contentphp )。 | 
<?php session_ start(); include("conn/conn.php"): include("function.php"); | 
S$self=$_SERVER['HTTP_REFERER']; / 获取 链接 到 当前 页 面 的 前 一 页 面 的 URL 地 址 | 
Su=$_SERVER['HTTP HOST']; / 获取 当前 请 求 的 Host 头 信息 的 内 容 | 
$1=$_SERVER['PHP SELF]: / 获取 当前 正在 执行 脚本 的 文件 名 | 
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$1=$_SERVER['QUERY_STRING']; 。 // 获取 查询 (query) 的 字符 串 (URL 中 第 一 个 问号 ?之 后 的 内 容 ) 
nr htp /i tne // 将 获取 的 变量 组 成 一 个 字符 串 ， 即 完整 的 路 径 
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图 23.12 ”收藏 帖子 


| 在 获取 到 完整 的 地 址 之 后 ， 接 下 来 将 帖子 的 标题 、 当 前 页 面 的 完整 路 径 和 当前 用 户 数 据 提交 到 
my_couection php 页 中 ， 生 成 一 个 表单 ， 最 后 将 数据 提交 到 my_coflection_ok.php 文件 中 ， 完 成 帖子 
的 收藏 。 提 交 帖 子 完整 地 址 和 帖子 标题 的 程序 代码 如 下 。 
| < 让 9 SESSIONIt forum user]—true){ 2> 
<form name="forml" method="post" action="my_collection.php?forum subject=<?php echo 
Smyrow_3[tb_send_subject];?>&&collection_user=<?php echo $_SESSION[tb forum user]:?>"> 
<td width="173" height="22" align="center" valign="bottom"> 
<input type="hidden" name="my_collection" value="<?php echo $url:?>"> 
<input type="submit" name="Submit" value="” 添加 到 我 的 收藏 夹 "> 
</td> 
</form> 
<?php } ?> 


| 创建 my_collection.php 文件 ， 生 成 一 个 表单 ， 为 收藏 的 帖子 添加 标签 和 说 明 ， 最 后 将 数据 提交 到 
”my_colleetion_ok.php 文件 中 ， 将 帖子 收藏 的 数据 添加 到 指定 的 数据 表 中 。 到 此 帖子 收藏 技术 讲解 完 
” 毕 ， 相 关 的 程序 代码 请 参考 本 书 源 代码 中 的 内 容 ， 这 里 不 再 袭 述 。 


23.3.4 屏蔽 回帖 


| 屏蔽 回帖 是 管理 员 的 权限 , 在 论坛 的 后 台 管理 中 进行 操作 。 回 复 是 否 被 屏蔽 是 根据 回复 帖子 数据 
| 表 中 tb_restore_tag 字段 的 值 来 判断 的 ， 如 果 帖 子 tb_restore_tag 字段 的 值 为 1， 则 说 明 该 帖子 被 屏蔽 ， 
| 否则 帖子 没有 被 屏蔽 。 因 此 屏蔽 回帖 就 是 将 指定 帖子 的 tb_restore_tag 字段 的 值 更 新 为 1。 

屏蔽 回帖 主要 通过 两 个 文件 来 完成 : 一 个 是 message_restore.php， 输 出 回复 帖子 的 内 容 ， 创 建 执 
| 行 屏蔽 帖子 的 form 表单 ;， 另 一 个 是 message_store.php， 根 据 提交 的 数据 ， 实 现 屏蔽 帖子 的 操作 。 关 
| 键 代码 如 下 (admin/message restore_ok.php)。 
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<?php session start(); include("conn/conn.php"); 
if$SSubmit=" 屏 项"){ 
while(list($name,$value)=each($ POST)){ 
Sresult=mysql_query("update tb_forum restore set tb_restore_tag=']' where tb_restore id=".$name."™"); 
if($result==true){ 
echo "<script>alert(' 屏 蔽 成 功 !"); window.location.hre 人 >"'index.php?title= 回 帖 管理 ':</script>";}} 


} 
if(SSubmit2 一 "取消 "){ 
while(list(Sname,$value)=each($_ POST)){ 
Sresult=mysql query("update tb forum Testore set tb_Testore tag= 0 where tb restore id=".$name.""); 
if($result==true){ 
echo "<script>alert( 取 消 屏蔽 !7; window.location.href='index.php?tite= 回 帖 管理 ;</script>";}} 
} 
?> 


23.3.5 ”短信 提醒 


短信 提醒 的 无 刷新 输出 主要 应 用 的 是 Ajax 技术 。 通过 Ajax 技术 调用 指定 的 文件 查询 是 否 存在 新 回放 
的 消息 ， 并 且 将 结果 返回 ， 通 过 span 输出 Ajax 中 返回 的 查询 结果 ， 运 行 结果 如 图 23.13 所 示 。 人 
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图 23.13 短信 提醒 


<script type="text/javascript" sre="js/xmlHttpRequest.js"></script> 
<script language="javascript"> | 
function show_counts(sender){ | 
Url='show_counts.php?sender='+sender: | 
xmlHttp.open("get",url, true): 
xmlHttp.onreadystatechange = functionO{ 
if(xmlHttp.readyState 一 4){ | 
tet = xmlHttp.responseText; | 
show_countsl1.innerHTML=tet; 
var show_counts = document.getElementById("show_counts"); 
if(tet>0){ show_counts ,innerHTML=tet show_counts.style.display="inline";} 
else{show_counts.innerHTML="";show_counts.style.display="none";} | 
} 
} | 
xmlHttp.send(null); | 
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</script> 
| <script language—"javascript'> 
反 | setInterval("show_counts('<?php echo $ SESSION["tb forum user"]:?>)".1000): 
食 六 <scipe 
| 使 用 <div> 标 签 显示 最 新 的 消息 。 
<span id="show_counts"></span> 


23.4 页 面 开发 


| 本 章 案例 网 站 比较 复杂 , 涉及 的 文件 众多 , 受 篇 幅 所 限 , 不 能 够 逐一 讲解 每 一 个 文件 的 设计 过 程 ， 
| 下 面 就 几 个 主要 页 面 的 开发 过 程 进行 分 析 。 


| 23.4.1 发 布 帖子 


| 
四 综 s 狗 各 帖子 发 布 是 为 登录 的 会 员 提供 一 个 发 布 帖子 的 操作 平台 。 在 该 平台 中 可 以 选择 发 布 帖子 的 类 别 ， 
视频 讲解 自 定义 帖 子 的 主题 ,选择 表情 图 ， 选择 上 传 附件 以 及 通过 文本 编辑 器 对 发 布 帖子 的 内 容 进行 编辑 。 帖 
| 子 发 布 的 运行 结果 如 图 23.14 所 示 。 
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23.14 ”帖子 发 布 


| 帖子 发 布 主要 由 两 个 文件 构成 :一 个 是 帖子 发 布 内 容 的 填写 文件 send_forumphp; 另 一 个 是 提交 
| 数据 的 处 理 文件 send_forum_okphp。 
| 在 send_forum php 文件 中 , 可 以 将 该 文件 中 的 内 容 分 成 3 个 部 分 : 第 1 部 分 初始 化 Session 变量 ， 
| 连接 数据 库 以 及 调用 js 文件 ， 第 2 部 分 输出 当前 登录 会 员 的 个 人 信息 第 3 部 分 构建 fom 表单 ， 实 
， 现 发 布 帖子 数据 的 提交 。 

【操作 步骤 】 

(1) 初始 化 Session 变量 ， 连 接 数据 库 以 及 调用 指定 的 包含 文件 ， 并 且 判 断 当前 用 户 是 否 是 会 员 ， 
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如 果 不 是 将 不 能 进行 帖子 发 布 操作 (send_forum php)。 | 


<?php session_ start(); include("conn/conn.php"); | 
if($_SESSION[tb forum user]==true){ | 


?> | 
<script type="text/javascript" src="js/editorjs"></script> | 任 - 
(2) 从 数据 库 中 读 取出 当前 会 员 的 个 人 信息 ， 并 且 进 行 输出 ， 代 码 如 下 。 Note 


<?php $query_l=mysql query("select * from tb forum user where tb forum user='$_SESSION[tb forum user]", | 
$conn); 

Smyrow_l=mysql fetch array($query_1):; 

echo "<img sre='$myrow_ 1[tb_forum picture]'>": 

echo "当前 用 户 :"; 

echo $myrow_l1[tb_forum user]; 

echo "注册 时 间 :"; 

echo $myrow_l[tb forum date]; 

echo "积分 :"; 

echo $myrow_l[tb forum grade]; 

?> 


(3) 创建 form 表单 ， 提 交 发 布 帖子 的 数据 ， 包 括 帖 子 的 类 别 、 主 题 、 表 情 图 、 文 本 内 容 和 发 布 
人 。 在 对 帖子 内 容 进行 填写 时 ， 应 用 的 是 一 个 文本 编辑 器 ， 通 过 文本 编辑 器 可 以 对 提交 的 内 容 进行 编 | 
辑 ， 程 序 关键 代码 如 下 。 | 


<td align="right" class="STYLE11"> 帖 子 主题 ， </td> 
<td><input name="send_subject" type="text" id="send_subject" size="60"></td> 


</tr> 
<tr> 
<td align="right" class="STYLE11"> 表 情 图 : </td> 
<td><table> 
<tr> 
<td height="80" colspan="2"><div align="center"> 
<table height="30" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<2php 
for($i=1;$i<=24;$it+){// 根据 文件 夹 中 表情 图 的 个 数 创建 循环 语句 
if($i%6 一 0){ // 判断 变量 的 值 是 否 等 于 0 
?> 
<td width="40" height="30"><div align="center"> 
<!-- 输出 表情 图 -> | 
<img src=<?php echo("images/inchoative/face".($i-1).".gif’"):?> width="20" height="20"> ， 
</div></td> | 
<td width="40" height="30"><div align="center"> | 
<!-- 创 建 单 选 按钮 -> | 
<input type="radio" name="face" value="<?php echo("images/inchoative/face". | 
($i-1).".gif'):?>"> | 
</div></td> | 
</tr> 
<?php }else{ ?> | 


<td width="40" height="30"><div align="center"> 
<img src=<?php echo("images/inchoative/face".($1-1).".gif'"):?> width="20" height="20"> | 


“451: 


3 玉 网 设计 与 网 站 建设 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


Bb 


| SA 

| <td width="40" height="30"><div align="center"> 

| <input type="radio" name="face" value="<?php echo("images/inchoative/face".($i-1). 
| "gif');?>" <?php if($i=—1) { echo "checked";}?>> 


全 辐 | </div></td> 
| <?php } } > 


</table> 
Note | </div></td> 


| </t> 
| </table></td> 
| <tr> 
<td width="107" align="right" class="STYLE11"> 文 章 内 容 : </td> 
<td width="569"> 
<textarea name="menu" cols="1" rows="1" id="menu" style="position:absolute;left:0;visibility:hidden;"></textarea> 
<script type="text/javascript"> 
| var editor = new FtEditor("editor"); 
| editor.hiddenName = "menu"; 
| editor.editorWidth = "100%"; 
| editor.editorHeight = "300px"; 
| editor.show(); 
| </script> 
| <input type="hidden" name="tb_forum user" value="<?php echo $_SESSION[tb forum user];?>"></td></tr> 
| 有 关 send_forum.php 文件 的 讲解 到 此 结束 , 完整 代码 请 参考 本 书 源 代码 中 的 内 容 。 下 面 介绍 表单 
”处 理 页 send_forum_ok.php 文件 。 在 该 文件 中 将 表单 中 提交 的 数据 存储 到 数据 库 中 ， 完 成 发 布 帖子 信 
| 息 的 存储 ， 程 序 代码 如 下 〈send_forum ok.php)。 


| <?php session_start(); include_once("conn/conn.php"); 
| S$tb_send_type=0; / 设置 帖子 是 否 置顶 


| S$tb_send_types=0; / 判断 帖子 是 否 有 回复 

| S$tb_send_small type=$ POST[send sort]; / 获取 表单 中 提交 的 数据 
| S$tb_send_subject=$_POST[send_subject]; / 获取 表单 中 提交 的 数据 
| S$tb_send_ picture=$_POST[face]; / 获取 表单 中 提交 的 数据 


| $tb_send_content=trim($_ POST["menu"]); / 获取 表单 中 提交 的 数据 
| S$tb_send_user=$_POST[tb_forum user]; 

| S$tb_send_date=date("Y-m-j His 

| if($_FILES[send_accessories][size]==0){ / 判断 是 否 有 附件 上 传 

| Sresult=mysql_query("insert into tb_ forum send(tb_send subject,tb_send content,tb_send user,tb_send date, 
‘tb_send picture,tb_send type,tb_send types,tb_send small type) values (".$tb_send subject.",".$tb_send_content.", 
| m8tb_send user.™,".$tb_send_date.™,".$tb_send_picture.™,".$tb_send type.",".$tb_send types.",".$tb_send_small type 


| Sconn); 

| echo mysql_error(); 

| if($resull){ 

| mysql_query("update tb_forum user set tb forum grade=tb forum grade+5",$conn); 
| echo "<script>alert( 新 帖 发 表 成 功 !");history.back0:</script>"; 
| mysql_close($conn); 

| jelse{ 

| echo "<script>alert(' 新 帖 发 表 失败 !);history.back();</script>"; 

| Inysql_close($conn); 

| } 

| } 
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if($_FILES[send accessories][size] > 20000000){ / 判断 上 传 附件 是 否 超过 指定 的 大 小 
exitO; 
jelse{ 


$path = 'J/file/.time().$ FILES['send_accessories'][mame']; 。”// 定义 上 传 文件 的 路 径 和 名 称 
if(move_uploaded file($ FILES['send accessories']['tmp_name'],$path)) {// 存储 附件 
这 mysql query("insert into tb forum send(tb_send subject,tb_send content,tb_send user,tb_send date, ‘Note 
tb_send picture,tb_send type,tb_send types,tb_send small type,tb send accessories) values (".$tb send subject.", ' 
".$tb_send_content.",".$tb_send user.",".$tb_send date.",".$tb_send picture.",".$tb_send type.",".$tb_send types. ， 
™".$tb_send_small type.",".$path.")",$conn){ 
mysql query("update tb forum user set tb forum grade=tb forum grade+5",$conn); 
echo "<script>alert( 新 帖 发 表 成 功 !");history.backO;</script>"; 
mysql_close($conn); 
}else{ 
echo "<script>alert(' 新 帖 发 表 失败 1");history.back0;</script>"; 
mysql_close($conn); 


echo "<script>alert( 上 传 文件 超过 指定 大 小 ! Whistory.go(-1);</script>" | 


} | 
?> 


到 此 帖子 发 布 功能 的 实现 过 程 介绍 完毕 ， 完 整 代码 可 以 参考 本 书 源 代 码 中 的 内 容 。 
23.4.2 浏览 帖子 


后 可 以 在 相应 的 帖子 主题 中 浏览 到 具体 帖子 的 内 容 。 帖 子 主题 和 帖子 内 容 浏览 的 运行 结果 如 图 23.15 
所 示 。 
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图 23.15 浏览 帖子 | 
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帖子 浏览 是 从 帖子 类 别 的 输出 开始 的 , 首先 在 网 站 的 左 侧 框架 中 应 用 树 状 导航 菜单 输出 帖子 的 类 
| 别 ， 根 据 树 状 导航 菜单 中 输出 帖子 的 类 别 ， 设 置 超 链 接 ， 将 指定 类 别 的 帖子 在 右 侧 的 框架 中 输出 ， 即 
| 在 contentphp 文件 中 输出 帖子 的 内 容 ， 程 序 关键 代码 如 下 (left.php)。 


| <td width="84%" height="24" background="images/index 5.jpg" onClick="javascript:open_close(id_a<?php echo 
Smyrow['tb_big type id'];?>)" >&nbsp:&nbsp:&nbsp;&nbsp:&nbsp;<a href="content.php?content=<?php echo 
Smyrow['tb_big type_content]:?>&&content 1=<?php echo Smyrows['tb small type_content]:?>" target="contentFrame"> 
”<?php echo $myrow['tb_big type_content]:?></a></td> 


这 里 的 content.php 文件 是 在 右 侧 的 框架 中 输出 的 内 容 , 超 链接 中 的 target 属性 获取 的 是 右 侧 框架 
中 的 链接 文件 的 名 称 ， 设 置 栏目 标识 变量 content， 代 表 帖 子 的 所 属 专区 ，content_1 代表 帖子 的 类 别 。 


<td height="23">&nbsp;&nbsp; 
<a href="content.php?content=<?php echo S$myrow['tb_ big type_content]:?>&&content 1=<?php echo 
Smyrow_l1['tb_small type_content'];?>" target="contentFrame"> 
<?php echo $myrow_1['tb_small type_content]:?></a></td> 


然后 ， 在 content.php 文件 中 输出 对 应 类 别 帖子 的 内 容 。 其 中 应 用 switch 语句 ， 根 据 获取 的 栏目 
标识 变量 $class 的 不 同 值 ， 分 别 调用 不 同 的 文件 ， 输 出 不 同类 别 中 帖子 的 内 容 。 

【操作 步骤 】 

(1) 判断 论坛 的 所 属 专区 和 类 别 是 否 为 空 ， 如 果 为 空 则 输出 默认 的 内 容 ， 否 则 将 输出 对 应 专区 
和 类 别 中 帖子 的 内 容 (content.php)。 


<?php if($_GET[content]=—"" and $_GET[content 1] 一 ""){ ?> 
<table> 
<tr> 
<td height="10">&nbsp;</td> 
</tr> 
<tr> 
<td><?php include_once("becd.php"):?></td> 
</tr> 
</table> 
<?php }else{?> 


(2) 创建 一 个 搜索 引擎 的 表单 ， 为 不 同 的 类 别 和 专区 设置 超 链接 ,设置 超 链接 的 栏目 标识 变量 ， 
关键 代码 如 下 。 


<form name="forml"” method="post” action="contentphp?class= 搜 索 引擎 &&content=<?php echo $_GET 
content];?>&&content_1=<?php echo $ GET[content 1];:?>" onSubmit="return check_submit():"> 
<tr> 
<td width="10%" height="40" rowspan="2” valign="middle"><a hre 全 "contentphp?class= 最 新 帖子 
&&content=<?php echo $_ GET[content]:?>&&content 1=<?php echo $_ GET[content 1]:?>"><img src="images/ 
index_7 (1).jpg" width="65" height="23" border="0"></a></td> 

| <td width="10%" rowspan="2" valign="middle"><a hre 伟 "contentphp?class= 精 华 区 &&content=<?php 

| echo $_GET[content];?>&&content_ 1=<?php echo $_ GET[content 1]:?>"><img src="images/index_7 (2).jpg" width= 
| 55" height="23" border="0"></a></td> 

<td width="10%" rowspan="2" valign="middle"><a hre 全 "contentphp?class= 热 点 区 &&content=<?php 

echo $_ GET[content];?>&&content 1=<?php echo $ GET[content 1]:?>"><img src= "images/index 7 (3).jpg" width= 
"52" height="23" border="0"></a></td> 

<td width="10%" rowspan="2" valign="middle"><a hre 人 ="content.php?class= 待 回复 &&content=<?php 

echo $_GET[content];?>&&content 1=<?php echo $ GET[content 1]:?>"><img src="images/index 7 (4).jpg" width= 


本 
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I 

"55" height="23" border="0"></a></td> 

<td width="25%" height="38" align="right" valign="bottom"><input name="tb_send subject content" 
type="text" size="20" /> 

&nbsp;&nbsp;</td> 
<td width="25%" rowspan="2"><input type="image" name="imageField" src="images/index 71.jpg"/></td> 
</tr> We 

</form> Note 


(3) 编写 switch 语句 ， 根 据 栏 目标 识 变 量 $class 的 不 同 值 ， 调 用 不 同 的 文件 ， 代 码 如 下 。 


<2php 
Switch($_ GET['class]){ 
case "最 新 帖子 ": 
include("new_forum.php"); 
break; 
case "精华 区 ": 
include("distillate.php"); 
break; 
case "热点 区 ": 
include("hotspot.php"); 
break; 
case " 待 回复 ": 
include("pending.php"); 
break; 
case "搜索 引擎 ": 
include("search.php"); 
break; 
Case "™: 
include("new_forum.php"); 
break; 
El 
= 


根据 $class 变量 的 不 同 值 调 用 不 同 的 文件 ， 在 被 调用 的 这 些 文件 中 ， 读 取 数 据 库 中 数据 的 方法 都 

是 相同 的 ， 都 是 根据 所 属 的 类 别 从 数据 库 中 读 取 出 符合 条 件 的 数据 ， 进 行 分 页 显示 。 | 
这 里 以 “最 新 帖子 ”中 调用 的 new_forumphp 文件 为 例 ， 对 被 调用 文件 的 创建 方法 进行 讲解 。 在 | 
new_forum php 文件 中 , 主要 就 是 以 超 链接 栏目 标识 中 传递 的 变量 $_GET[content] 和 $_GET [content 1] 
为 条 件 ， 从 数据 库 中 读 取出 符合 条 件 的 数据 。 | 
【操作 步骤 】 | 

(1) 首先 输出 的 是 所 属 专区 中 公告 和 置顶 帖子 的 标题 信息 ， 并 且 设置 超 链接 ， 链 接 到 | 
send_affiche .php 和 send_forum contentphp 文件 ， 在 对 应 的 文件 中 输出 公告 和 置顶 帖子 的 详细 内 容 ， | 
关键 代码 如 下 (new_forum.php)。 
<?php 
$query_1=mysql query("select * from tb_ forum send where tb_send type='1' and tb_send small type=".$ GET 
[content_1].""); | 
while($myrow_1=mysql fetch array($query_1){ | 

?> | 

<tr> | 

<td width="10%" align="center"><span class="STYLE4">【 置 顶 】</span></td> | 


人 
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<td colspan="4" width="90%"><a href="send forum content.php?send big type=<?php echo $ GET 

[content]:?>&&send small type=<?php echo $myrow_l[tb_send small type];?>&&send id=<?php echo $myrow 1 
[tb_send 1d];?>" target="_blank"><?php echo $myrow_l[tb_send subject]:?></a></td> 

</tr> 

<?php }7> 


(2) 根据 栏目 标识 传递 的 变量 ， 从 数据 库 中 读 取出 对 应 的 专区 和 类 别 中 帖子 的 数据 ， 并 且 定 义 
变量 ， 实 现 数据 的 分 页 显示 ; 在 输出 帖子 的 标题 时 ， 设 置 超 链接 ， 链 接 到 send_fonun_contentphp， 在 
该 文件 中 输出 帖子 的 详细 信息 ， 程 序 关键 代码 如 下 。 


?php 
这 $_GET[page]){ 
Spage_size=10; // 定义 每 页 输出 10 条 数据 
// 按照 指定 的 类 别 从 数据 库 中 读 取 帖子 的 数据 
$query="select count(*) as total from tb_forum send where tb_send small type='".$_GET[content 1].""; 
Sresult=mysql_query($query); 
$message_count=mysql]_result($result,0,"total"); 
S$page_count=ceil($message_count/$page size); 
Soffset=($_GET['page']-1)*$page size; 
/ 从 数据 库 中 读 取 帖子 的 数据 ， 按 照 帖子 发 布 的 ID 值 进行 降 索 排列 输出 
$query_2=mysql_query("select * from tb forum send where tb_send small type=".$ GET[content 1]." 


‘order by tb_send id desc limit Soffset, Spage_size"): 


| sd 


while($myrow_2=mysql _fetch_array($query_2)){ 
?> 
<tr> 
<td width="5%" align="center" bgcolor="#FFFFFF"><img src="<?php echo $myrow_2[tb_send_picture]:?>" /> 


<td width="35%" align="center"” bgcolor="#FFFFFF"><a href="send forum content.php?send big type= 


| <?php echo $_ GET[content];?>&&send_small type=<?php echo $myrow_2[tb_send_small type]:?>&&send id=<?php 
‘echo $myrow_2[tb_send id];?>" target="_blank"><?php echo $myrow_2[tb_send_subject]:?></a></td> 


<td width="25%" align="center" bgcolor="#FFFFFF"><?php echo $myrow_2[tb_send_date];?></td> 
<td width="25%" align="center" bgcolor="#FFFFFF"><?php echo $myrow_2[tb_send_user]:?></td> 
<td width="10%" align="center" bgcolor="#FFFFFF"> 
<?php $query_s=mysql query("select * from tb forum restore where tb_send id='$myrow 2[tb_send id]"); 
echo mysql num rows($query_s); 
?></td> 
</tr> 
<?php ?> 
上 述 讲解 的 是 帖子 主题 浏览 的 实现 方法 ， 下 面 介绍 帖子 内 容 浏 览 功能 的 实现 。 
帖子 内 容 的 输出 是 通过 上 面 提 到 的 send_forum_contentphp 文件 来 完成 的 。 在 该 文件 中 输出 帖子 
的 详细 内 容 、 发 帖 人 的 信息 、 回 复 帖子 的 内 容 和 回复 人 的 信息 ， 并 且 还 对 登录 用 户 进行 了 权限 设置 。 
普通 用 户 只 能 浏览 帖子 的 详细 信息 ， 不 能 进行 其 他 任何 操作 。 
会 员 登 录 ， 不 但 可 以 浏览 帖子 的 详细 信息 ， 而 且 可 以 对 帖子 进行 回复 和 引用 ， 收 藏 帖子 、 发 送 短 
信和 以 及 加 对 方 为 好 友 ; 如 果 浏 览 的 是 当前 会 员 自己 发 布 或 者 回复 的 帖子 ， 还 可 以 对 帖子 进行 修改 、 删 
除 和 结 帖 的 操作 。 
管理 员 登 录 ， 可 以 执行 上 述 会 员 具 有 的 所 有 操作 ， 并 且 还 可 以 对 帖子 进行 置顶 的 操作 ， 这 是 会 员 
所 不 具备 的 。 
下 面 对 send_forum_ content php 文件 进行 分 步 讲 解 ， 看 看 各 个 部 分 的 功能 都 是 如 何 实现 的 。 
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【操作 步骤 】 

(1) 初始 化 Session 变量 ， 连 接 数 据 库 ， 通 过 include 语句 调用 包含 文件 ， 通 过 $_ SERVER 预定 ， 
义 变量 获取 当前 页 面 的 完整 链接 地 址 , 用 于 实现 帖子 收藏 的 功能 ， 有 关 帖 子 收藏 技术 的 讲解 请 参考 上 | 
面 章节 中 的 内 容 。 

(2) 输出 发 帖 人 的 信息 和 发 布 的 帖子 信息 ， 并 且 为 发 送 短信 、 加 为 好 友 、 结 帖 、 置 项 、 修 改 、 
删除 和 回复 的 操作 设置 超 链接 。 

主要 代码 如 下 (send_forum _content.php)。 


< 从 数据 库 中 读 取 出 指定 帖子 的 发 布 人 的 信息 --> | 


<?php 

$query_1=mysql query("select * from tb_forum send where tb_send id='$ GET[send id]",$conn); 

Smyrow_l=mysql fetch array($query_1); 

$query_2=mysql query("select * from tb forum user where tb forum user='$myrow_1[tb_send_user]",$conn); | 

Smyrow_2=mysql] fetch array($query_2); | 

echo "<img sre='$myrow_2[tb_forum picture]>"."<br>"; | 

echo "发 帖 人 :"; | 

echo $myrow_2[tb_forum user]."<br>"; | 

echo "注册 时 间 :"."<br>"; 

echo $myrow_2[tb_forum date]."<br>"; 

echo "积分 :"; 

echo $myrow_2[tb_ forum grade]."<br>"; 

if($_SESSION[tb_ forum user]==true){ | 

echo "<a href='send mailphp?receiving person=$myrow 2[tb forum user]&&sender=$_SESSION[tb forum user] | 
target="_blank'><img src='images/index_ 8.jpg' width='76' height="24' border='0></a>"."<br>"; | 

echo "<a href='my _friend.php?friend=$myrow_2[tb_forum user]&é&my=$_SESSION[tb forum user] target=" blank> | 
<img src='images/index_8 (1).jpg' width="82' height="24' border="0'></a>"; | 

} | 

2></span></td> | 

<td width="780" height="20%" bgcolor="#FFFFFF"><?php echo Smyrow_3[tb_send_date]; ?> 楼 主 | 

<2php 

这 $myrow_1[tb_forum_end]!=1){ | 

?> | 

<a href="end forum.php?send id=<?php echo $ GET[send id]:?>&send user=<?php echo $myrow_3[tb_send_ | 
user];?>"> 结 帖 </a> 

<?php | 

}else{ | 

echo "已 结 帖 "; | 

} 

?></td> 

</t> 
<tr> 
<td height="60%" bgcolor="#FFFFFF"><?php 

echo $myrow_3[tb_send_content]; 

?> 

<td height="20%" align="right" bgcolor="#FFFFFF"><?php 这 Smyrow_3[tb_send_accessories] 一 true){fecho " 

<a href='download.php?accessories=$myrow_3[tb_send_accessories]> 附 件 </a>";}?>&nbsp;&nbsp;&nbsp;&nbsp; 

<a href="permute_send.php?permute id=<?php echo Smyrow 3[tb_send id]:?>"> 置 顶 </a>、 

<a href="recompose_send.php?recompose id=<?php echo $myrow 3[tb_send id]:?>&&recompose_user=<?php 
echo Smyrow_3[tb_send_user]:?>"> 修 改 </a>、 
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<a href="delete send.php?delete id=<?php echo $myrow 3[tb _send id]:?>&&delete_send forum=<?php echo 
$myrow_ 3[tb_send_user];:?>"> 删 除 </a>、 
<a href="send forum content.php?send big type=<?php echo $ GET[send big type];?>&&send small type= 
<?php echo $ GET[send small typel]:?>&&send id=<?php echo $ GET[send id];?>#bottom"> 回 复 </a></td> 
(3) 输出 与 该 帖子 相关 的 回复 帖子 的 信息 ， 以 及 回复 人 的 信息 ， 同 样 也 为 发 送 短信 、 加 为 好 友 、 
vote | 引用 、 修 改 和 删除 操作 设置 了 超 链 接 。 其 中 在 输出 回复 帖子 的 内 容 时 ， 还 对 回帖 内 容 进 行 判断 ， 判 断 
该 帖子 是 否 被 管理 员 屏蔽 。 实 现 的 方法 与 第 (2) 步 相同 ， 这 里 不 再 袭 述 ， 完 整 代码 请 参考 本 书 源 代 
码 中 的 内 容 。 
(4) 积分 排行 ， 该 功能 的 实现 主要 就 是 从 会 员 信息 表 中 读 取 会 员 的 积分 数据 ， 并 且 按 照 降 察 排 
列 ， 输 出 积分 最 高 的 前 10 名 用 户 ， 程 序 代 码 如 下 。 
<?php 
$sql=mysql query("select tb forum usertb forum grade from tb _ forum user order by tb forum grade desc limit 10"); 


while($myrow=mysql fetch array($sql){ 
2> 


<tr> 
<td width="45%" height="19" align="right"> 
<a href="person data.php?person id=<?php echo $myrow[tb_forum user]:?>"><?php echo $myrow[tb forum 
user];?></a> 
&nbsp;</td> 
<td width="55%" align="left">——<?php echo Smyrow[tb_forum grade];?></td> 
</tr> 
<?php }2> 


(5) send forum contentphp 文件 第 5 部 分 是 一 个 form 表单 ， 用 于 提交 回复 帖子 的 信息 。 


23.16 所 示 。 


入 93》 生生 旧 | 册 有 天 是 :20000013 后 管理 


下 es, NF 


EE 
Ht: EL 


ver: | 加 | | | zs [3 me [SUSE 


图 23.16 回复 帖子 
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帖子 回复 中 提交 的 form 表单 存储 在 23.4.2 节 中 介绍 的 send_forum contentphp 文件 中 。 在 这 个 
form 表单 中 ， 将 回复 主题 、 附 件 、 回 复 内 容 、 发 布 帖子 ID 和 回复 人 信息 都 提交 到 send form | 


content_ok.php 文件 中 进行 处 理 ， 完 成 帖子 的 回复 。 

在 对 回复 内 容 进行 编辑 时 还 应 用 了 UBB 技术 ， 实 现 对 回复 的 内 容 进行 编辑 ， 并 且 还 对 回复 内 容 
的 字 节 数 进行 了 控制 。 

UBB 技术 的 实现 是 通过 UBBCodejs 文件 来 完成 的 , 该 文件 存储 于 根 目录 下 的 js 文件 夹 中 。 限制 
和 统计 回复 内 容 字 节 数 的 方法 是 通过 textjs 文 件 来 完成 的 ,该 文件 同样 存储 于 根 目录 下 的 js 文件 夹 中 。 
form 表单 的 关键 代码 如 下 (send_forum content.php)。 


<form action="send forum content ok.php" method="post" enctype="mnultipart/form-data" name="myform"> 
<tr><a name="bottom" id="bottom"></a><!-- 定 义 命名 锚 记 --> 
<td width="103" height="30" align="right"> 回 复 主 题 ，</td> 
<td width="617"><input name="restore_subject" type="text" id="restore_subject" size="60" value=" 
<?php 
if($_GET[cite]==true){ 
$query=mysql query("select * from tb forum restore where tb_restore id='$ GET[cite]"); 
Sresult=mysql]_fetch_array($query): 
echo "摘自 ("$result[tb_restore_user]."): ".$result[tb_restore_subject]; 
} 
?> 
"><input type="hidden" name="tag" value="<?php echo $myrow_1[tb_forum_end];?>" ></td></tr> 
人 | 
<td height="30" align="right"> 附 件 ，</td> | 
<td><input name="restore_accessories" type="file" size="45"></td> | 
</t> | 
<tr> 
<td height="30" align="right"> 文 字 编 程 区 : </td> | 
<td width="617"><img src="images/UBB/B.gif' width="21" height="20" onClick="bold0">&nbsp; 
<img src="images/UBB/I.gif' width="21" height="20" onClick="italicize()">&nbsp;<img src="images/UBB/U.gif’" 
width="21" height="20" onClick="underline0">&nbsp;<img src="images/UBB/img.gif’ width="21" height="20" | 
onClick="img0"> 字体 | 
‘<select name="font" class="wenbenkuang" id="font” onChange="showfont(this.options[this. 
selectedIndex].value)"> 
<option value=" 宋 体 " selected> 宋 体 </option> | 
<option value=" 黑 体 "> 黑体 </option> | 
<option value=" 隶 书 "> 隶书 </option> | 
<option value=" 楷 体 "> 楷体 </option> 
</select> 
字号 <span class="pt9"> 
<select 
name=size class="wenbenkuang" onChange="showsize(this.options[this.selectedIndex].value)"> 
<option value=1>1</option> 
<option value=2>2</option> 
<option value=3 selected>3</option> 
<option value=4>4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
</select> 
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颜色 
<select onChange="showcolor(this.options[this.selectedIndex].value)" name="color"” size="1" 
class="wenbenkuang" id="select"> 
<option selected> 默 认 颜 色 </option> 
<option style="color:#FF0000" value="#FF0000"> 红 色 热 情 </option> 
<option style="color:#0000FF" value="#0000ff"> 蓝 色 开 朗 </option> 
<option style="color:#ft00fP' value="#ffto0fP'> 桃 色 浪漫 </option> 
<option style="color:#009900" value="#009900"> 绿 色 青 春 </option> 
<option style="color:#009999" value="#009999"> 青 色 清 爽 </option> 
</select> 
</span></td> 
</tr> 
<tr> 
<td align='right"> 文 章 内 容 : </td> 
<td width="617"> 
| <textarea name="file" cols="70" rows="10" id="file” onKeyDown="countstrbyte(this.form file,this.form.total, 
| this.form.used,this.form remain);" onKeyUp="countstrbyte(this .form file,this .fonm totalthis .form used.this .form .remain):"><?php 
| 这 $_GET[cite] 一 true){ 
$query=mysql query("select * from tb_forum restore where tb_restore id='$ GET[cite]"); 
| S$result=mysql_fetch_array($query); 
| echo $result[tb_restore_content]; 
| } 
?></textarea> 
| <input type="hidden" name="tb_send id" value="<?php echo $_ GET[send id]:?>"> 
| <input type="hidden" name="tb_restore_user" value="<?php echo $ SESSION[tb_forum_user];:?>"></td> 
| </tr> 
<tr> 
<td height="25" colspan="2">&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbspi&nbsp; 
| <input name="submit" type="submit" id="submit" value=" 提 交 " onClick="return check0:"> 
| &nbsp;&nbsp; 最 大 字 节 数 : 
<input type="text" name="total" disabled="disabled" class="textbox" id="total" value="500" size="5"> 
&nbsp;&nbsp; 输 入 : 
<input type="text" name="used" disabled="disabled" class="textbox" id="used" value="0" size="5"> 
| 字 节 &nbsp:&nbsp: 剩 余 : 
| <input type="text" name="remain" disabled="disabled" class="textbox" id="remain'" value="500" size="5"> 字 节 
| &nbsp:&nbsp; 
| <input name="reset" type="reset" id="reset" value=" 重 写 "></td> 
| </tr> 
| <tr> 
<td height="35" colspan="2">&nbsp; &nbsp:</td> 
</tr> 
</form> 


到 此 回复 帖子 的 提交 文件 的 内 容 讲解 完毕 ， 接 下 来 介绍 回复 帖子 的 处 理 页 send_ forum content_ 


Er 


ok.php 文件 。 
| 在 该 文件 中 实现 对 回复 帖子 中 提交 的 数据 进行 存储 , 并且 更 新 帖子 的 回复 次 数 ， 以 及 将 发 布 帖子 
| 数据 表 中 的 tb_send_types 字段 更 新 为 1， 表明 该 帖子 已 经 有 回帖 。 
在 send_forum content_ ok.php 文件 中 ， 首 先 获取 到 form 表单 中 提交 的 数据 ， 然 后 判断 回复 的 内 


TH 


| 容 中 是 否 包含 附 件 ， 如 果 不 存在 附件 ， 则 直接 将 获取 的 数据 添加 到 指定 的 数据 表 中 ， 并 且 更 新 帖子 的 
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回复 次 数 和 发 布 帖子 数据 表 中 tb_send_types 字段 的 值 为 1。 
如 果 存在 附件 ， 而 附件 的 大 小 超过 上 传 文件 大 小 的 限制 ， 则 将 给 出 提示 信息 “上 传 文件 超过 指定 
大 小 1”。 | 


如 果 存 在 附件 ， 并 且 在 指定 的 范围 之 内 ， 则 先 将 该 附件 存储 到 服务 器 中 指定 的 文件 夹 下 ， 然 后 再 | 颌 六 
将 附件 在 服务 器 中 的 存储 路 径 和 其 他 数据 一 起 存储 到 指定 的 数据 表 中 , 同样 也 更 新 帖子 的 回复 次 数 和 | 一 
发 布 帖 子 数据 表 中 tb_send_types 字段 的 值 为 1， 程序 代码 如 下 (send_ forum content ok.php )。 Note 

<?php session_start(); include_once("conn/conn.php"); 

if($_SESSION[tb_forum user]==true){ / 判断 是 否 是 正确 登录 

S$tb_restore_subject=$_POST[restore_subject]; // 获取 回复 帖子 的 主题 

S$tb_restore_content=$ POST[file]; / 获取 上 传 的 附件 

S$tb_restore_ user=$ POST[tb_restore_user]; / 获取 回复 人 

S$tb_send id=$ POST[tb send id]; / 获取 要 回复 帖子 的 ID 

S$tb_restore_date=date("Y-m-d H:i:s"); // 定义 回复 时 间 

if($_FILES[restore_accessories][size]==0){ / 判断 是 否 有 附件 上 传 


这 mysql query("insert into tb forum restore(tb_restore_subject,tb_restore_content,tb_restore_user,tb_send id, 
tb_restore_date) values ("".$tb_restore_subject.","".$tb_restore_content.","".$tb_restore_ user.",".$tb_send id.",' 
".$Stb_restore_date.")",$conn)){ 

Inysql_ query("update tb_forum restore set tb_forum counts=tb forum counts+l",$conn): 
mysql_query("update tb_forum send set tb_send types=] where tb_send id='$tb_send id",$conn); 
echo "<script>alert(' 回 复 成 功 !"):history.back(:</script>"; 
mysql_close($conn); 
}else{ 
echo "<script>alert( 回 复 失败 !"):history.backO;</script>"; 
mysql_close($conn); 


站 

if($_FILES[restore_accessories][size] > 20000000){ / 判断 上 传 的 附件 是 否 超 过 规定 文件 大 小 
echo "<script>alert( 上 传 文件 超过 指定 大 小 ! ');history.go(-1);</script>"; 
exit(); 

}else{ 


$path ='./file/'.time().$_FILES['restore_accessories'"][mname']; /定义 上 传 文件 的 名 称 和 存储 路 径 
if (move_uploaded_file($_FILES['restore_accessories'"]['tmp_name'],$path)) {// 将 附件 存储 到 服务 器 指定 的 文件 
夹 下 
这 mysql_query("insert into tb forum restore(tb_restore_subject,tb_restore_content,tb_restore_user,tb_send _id, 
tb_restore_date,tb_restore_accessories) values ("".$tb_restore subject.","".$tb_restore_content.","".$tb_restore_user.™",' 
".$tb_send id.",".$tb_restore_date.™,".$path.")",Sconn){ 
mysql_query("update tb_forum restore set tb_forum counts=tb forum countst+1",$conn); 
mysql_query("update tb_ forum send set tb_send types=] where tb_send id='$tb_send_id",$conn); 
echo "<script>alert(' 回 复 成 功 !"):history.back();</script>"; 
mysql_close($conn); 
}else{ 
echo "<script>alert(' 回 复 失败 !");history.backO;</script>"; 
mysql_close($conn); | 
} | 
» 
}else{ 
echo "<script>alert(' 对 不 起 ， 您 不 可 以 回复 帖子 ， 请 先 登录 到 本 站 ， 谢 谢 !");history.back;</script>"; 
} 


?> 
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| 到 此 帖子 回复 功能 讲解 完毕 ， 详 细 的 程序 代码 可 以 参看 本 书 源 代码 中 的 内 容 。 
23.4.4 结 帖 
鲜 。。。 续 由 功能 是 对 会 员 自己 发 布 的 帖子 进行 操作 ， 当 获取 到 满意 的 答案 之 后 就 可 以 对 帖子 进行 结 由 


操作 ， 一 旦 结 帖 之 后 就 不 可 以 再 对 该 帖 进行 回复 ， 其 运行 结果 如 图 23.17 所 示 。 


I -ea | Shos >x 国 


用 Rh sin 个 人 信息 今天 是 ! 2615-05-12 我 多 与 的 村 于 我 的 帖子。 折 愉 巷 和 站 好友。 我 0 信 守 》 到 加 页 表册 后 管理 


美工 设计 > FS8 设 计 
涿 加 到 我 的 由 藏 夫 


2016-(8-12 13-55-45 楼 主 已 续 由 


co000 


轨 硕 、 伪 光 、 员 队 ,回归 


M12016-0-12 13:56:05 增 


图 23.17 结 帖 激活 

| 结 帖 功 能 避免 了 在 论坛 中 对 一 个 帖子 无 休止 的 回复 , 浪费 系统 资源 ,同时 也 确保 了 论坛 中 帖子 的 
| 规范 性 。 
| 论坛 的 管理 员 也 具备 这 个 权限 ,可 以 根据 帖子 的 回复 情况 ， 在 确定 已 经 有 满意 答案 的 情况 下 ， 而 
| 帖子 发 布 人 又 没有 进行 结 帖 操作 的 ， 可 以 由 管理 员 来 执行 这 项 操作 。 管理 员 的 结 帖 操作 是 在 论坛 后 台 
| 管理 的 帖子 管理 中 完成 的 。 
| 帖子 是 否 已 经 结 帖 是 根据 帖子 在 数据 表 中 tb_forum_end 字段 的 值 来 判断 的 , 如 果 字 段 的 值 为 1， 
则 说 明 帖 子 已 经 结 帖 ， 否 则 没有 结 帖 。 所 以 结 帖 操作 就 是 将 指定 帖子 在 数据 表 中 的 tb_forum end 字 
， 段 的 值 更 新 为 1。 
| 在 论坛 模块 中 ， 结 帖 操作 是 通过 在 send_forum f content.php 文件 中 设置 的 一 个 “ 结 帖 ”的 超 链 接 
来 执行 的 。 通 过 “ 结 帖 ” 这 个 超 链接 ， 链 接 到 send_forum.php 文件， 在 这 个 文件 中 根据 传递 的 ID 值 ， 
”执行 更 新 指定 帖子 tb_fomum_end 字段 值 的 操作 。 
| 在 send_forum contentphp 文件 中 设置 “ 结 帖 ”的 超 链接 ， 其 中 根据 tb_forum_end 字段 的 值 来 判 
| 断 输 出 的 内 容 ， 代 码 如 下 (send_formm _content.php )。 
<php 

这 $myrow_1[tb_forum end]'=1){ 

?> 
| <a href="end forum.php?send id=<?php echo $ GET[send id]:?>&send user=<?php echo $myrow 3[tb_send_ 
user];?>"> 结 帖 </a> 
| <pmp 

Jelse{ 

echo "已 结 帖 "; 


} 
2> 
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在 end_forum php 文件 中 执行 结 帖 的 操作 ， 以 $send_i 变量 传递 的 帖子 ID 值 为 依据 ,程序 代码 如 
下 (end forum.php)。 | 


<?php session start(); include("conn/conn.php"); 


if($_GET[send id]==true and $ GET[send user]—$_SESSION[tb forum user){ | 全 六 
Sresult=mysql query("update tb_forum send set tb forum end=-'1 where tb_send id=".$ GET[send_ 1d].""); | < 
if($result==true){ 

echo "<script>alert( 结 帖 激 活 !"); history.back();</script>"; 
} | 
Jelse{ 
echo "<script>alert(' 您 不 具备 该 权限 !"); history.back();</script>"; 
} 
?> 


23.4.5 ”搜索 引擎 


搜索 引擎 是 指 在 站 内 按照 指定 的 关键 字 , 从 论坛 发 布 的 帖子 和 回复 的 帖子 中 查询 出 符合 条 件 的 数 | 回 太史 

据 。 搜 索引 擎 主要 应 用 的 是 where 条 件 语句 中 的 like 运算 符 ， 通 过 该 运算 符 实现 模糊 查询 的 功能 。 ee 
在 论坛 模块 中 ， 搜 索引 擎 从 contentphp 文件 中 设置 的 站 内 搜索 文本 框 开始 ， 将 要 搜索 的 关键 字 提 | 

交 到 search php 文件 中 ， 在 search.php 文件 中 执行 模糊 查询 ， 并 将 查询 的 结果 输出 ， 如 图 23.18 所 示 。 | 


B13 rocahosinder on “ac| sis 


2016-08-12 13- 人 :03 
2016-08-12 13-50:32 


册子 锐 计 : 2 条 4: ML 


当前 论坛 上 总 共有 2531 人 在 续 ， 其 中 注册 十 广 9337 人 ， 访 窜 16019 人 ， 
Porered by STR- Teas@2006-2016. KOS Der Tom 起 2011-201 


23.18 ”搜索 引擎 | 
在 content.php 文件 中 ,创建 一 个 form 表单 ,提交 站 内 搜索 的 关键 字 ; 将 关键 字 提交 到 search.php | 
文件 中 ， 程 序 代码 如 下 (content.php)。 | 


<form name="forml" method="post" action="content.php?class= 搜 索引 擎 &&content=<?php echo $_GET[content]:?> | 
&&content 1=<?php echo $ GET[content 1];?>" onSubmit="retumn check submitO:"> | 
<tr> 


<td width="25%" rowspan="2"><input type="image" name="imageField" src="images/index 71.jpg" /></td> | 
A 
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| 时 
| </t> 
</form> 


search.php 文件 ， 根 据 表单 中 提交 的 关键 字 ， 分 别 在 发 布 帖子 和 回复 帖子 中 执行 模糊 查询 ， 将 查 
询 的 结果 以 分 页 的 形式 输出 到 页 面 中 。 模 糊 查 询 的 关键 代码 如 下 (search.php)。 


<?php session_start(); include("conn/conn.php"); 。 // 初始 化 session 变量 ， 连 接 数 据 库 
if($_GET['page']—""){ $_GET['page']=1; } // 判断 变量 的 值 是 否 为 空 ， 用 于 分 页 显示 
| if($_GET['pages']—""){ $_GET['pages']=1; } / 判断 变量 的 值 是 否 为 空 ， 用 于 分 页 显示 
| 这 $_GET[link type]—""){ $_GET[link type]=0;} 
if($_GET["link types]==""){ $_GET['link types']=0; } 
S$content=$_GET[content]; / 获取 帖子 的 类 型 
Scontent_1=$ GET[content 1]; // 获取 帖子 的 类 别 
/ 从 发 布 的 帖子 中 查询 
| $query_6=mysql query("select * from tb_forum send where tb_send subject like '"%".$_ POST['tb_send subject_ 
| content]."%' or tb_send_content like '%".$ POST['tb_send_subject_content"]."%%"); 
| // 从 回复 的 帖子 中 搜索 
| $query_7=mysql query("select * from tb forum restore Where tb_restore subject like '%".$ POST['tb send_ 
subject_content']."%' or tb_restore_content like '%".$_POST['tb_send_subject_content]."%"); 
| / 统计 查询 的 结果 
if(mysql num rows($query_6)>0 or mysql num rows($query_7)>0 ){ 
if($_GET['page'){ // 定义 分 页 的 变量 
Spage_size=10; // 定义 每 页 显示 的 数量 
| $query="select count(*) as total from tb forum send where tb_send subject like '%".$ POST['tb_ send_ 
| subject_content]."%b' or tb_send_content like '%".$ POST['tb_send_subject_content"]."%0"; 
| Sresult=mysql_query($query); 
$message_count=mysql_result($result,0,"total"); 
Spage_count=ceil($message_count/$page_size); 
Soffset=($_GET['page']-1)*$page_size; 
| $query_2=mysql query("select * from tb_forum send where tb_send subject like '"%".$_ POST[tb send_ 
| subject_content’]."%' or tb_send_content like '%".$_ POST['tb_send_subject_content]."%' limit $offset, $page_size"); 
| ?> 


| 到 此 ,站 内 搜索 功能 讲解 完毕 ， 有 关 查 询 结果 的 分 页 输出 ， 这 里 不 做 介绍 ， 完 整 代码 可 以 参考 本 
， 书 源 代 码 中 的 内 容 。 


| 23.4.6 ”帖子 分 类 


在 论坛 中 ,根据 帖子 的 发 布 时 间 、 帖 子 内 容 的 特殊 性 以 及 受 关注 的 程度 ， 还 有 帖子 是 否 有 人 回 
复 等 ， 对 帖子 进行 了 分 类 处 理 ， 分 为 最 新 帖子 、 精 华 区 、 热 点 区 和 待 回复 等 几 个 类 别 ， 其 运行 结果 
| 如 图 23.19 所 示 。 

最 新 帖子 :根据 帖子 的 ID， 按 照 ID 值 降 序 排 列 ， 输 出 最 新 的 10 条 帖子 信息 ， 程 序 关键 代 

码 如 下 Cnew_forum.php) 。 


<?php 
这 $_GET[page]){ 
| $page_size=10; // 定义 每 页 输出 10 条 数据 
| / 按照 指定 的 类 别 从 数据 库 中 读 取 帖 子 的 数据 
| $query="select count(*) as total from tb_ forum send where tb_send small type=".$ GET[content 1].""; 
| Sresult=mysql_query($query); 
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$message_count=—mysql] result($result,0,"total"); 

Spage_count=ceil($message count/$page size); 

Soffset=($_GET['page']-1)*$page size; 

/ 从 数据 库 中 读 取 帖 子 的 数据 ， 按 照 帖 子 发 布 的 ID 值 进行 降 宕 排列 输出 

$query_2=mysql query("select * from tb forum send where tb_ send small type=".$ GET[content 1]." 
order by tb_send id desc limit $offset, Spage_size"): 


while($myrow_2=mysql fetch array($query 2){ 
es 


Nine 


用 户 8 了 :sy 个 人 人 自信 天 是: neotri1 我 多 0 下 子 3 天 网友 扫 外 天 页 二 后 和 时 


美 T 设 计 

ua a i “区 本 大 加 
Feoroigit [内 青 】 区 
Ps 【 置 网 】 ess 
m 

多 他 开发 

图 书 开 发 

入 

熔 襄 社区 


:0 


加 前 论坛 上 多 共有 25314 入 在线 ， 革 中 注册 用 户 9337 人 ， 访 奉 15019 人 。 
i 
图 23.19 ”帖子 分 类 


回 ”精华 区 、 热 点 区 和 待 回复 : 这 3 个 类 别 的 实现 方法 相同 ， 都 是 根据 数据 库 中 帖子 指定 的 字段 
值 进行 判断 ， 精 华 区 根据 字段 tb_send type_distillate 的 值 判断 。 热 点 区 根据 字段 
tb_send_type_hotspot 的 值 判断 ， 而 待 回 复 则 根据 字段 tb_send_types 的 值 判 断 。 这 里 以 精华 
区 帖子 的 输出 为 例 ， 其 关键 代码 如 下 distillate.php》。 


<2php 
这 $_GET[page]){V/ 实现 精华 区 帖子 的 分 页 输出 

Spage_size=10; // 每 页 显示 10 条 记录 

// 执行 查询 语句 ， 以 tb_send_type_distillate 字段 的 值 是 否 为 1 为 条 件 ， 如 果 为 1 则 是 精华 帖子 ， 否 则 不 是 

$query="select count(*) as total from tb forum send where tb_send small type='$_GET[content 1]' and 
tb_send_ type_distillate=1"; 

Sresult=mysql_query($query); 

$message_count=mysql_result($result,0,"total"); 

S$page_count=ceil($message_count/$page_size); 

Soffset=($_GET['page']-1)*$page_size; 

Squery_2=mysql query("select * from tb forum send where tb _send small type='$content 1' and 
tb_send_type_distillate="]' limit $offset, Spage_size"); 

while($Smyrow_2=mysql fetch_array($query 2)){ 

2 
<tr> 

<td width="5%" align="center" bgcolor="#FFFFFF"><img src="<?php echo Smyrow 2[tb_send picture]:?>"></td> 

<td bgcolor="#FFFFFF"><a href="send forum content.php?send big type=<?php echo $_GET[content]:?> 
&&send small type=<?php echo $myrow 2[tb_send small type]:?>&&send id=<?php echo $myrow_2[tb_send 1d]:?>" 
target="_ blank"><?php echo Smyrow 2[tb_send subject]:?></a></td> 

<td width="25%" bgcolor="#FFFFFF"><?php echo $myrow_2[tb_send_date]:?></td> 
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<td width="25%" bgcolor="#FFFFFF"><?php echo $myrow_2[tb_send user]:?></td> 
| <td width="10%" bgcolor="#FFFFFF"><?php S$query_s=mysql query("select * from tb forum restore where 
也 send id='$myrow 2[tb_send 14]"); 
有 | echo mysql num rows($query_s); 
?|| ?></td> 
屋内 | </t> 
or 
| 上 述 介绍 的 是 如 何 从 数据 库 中 获取 到 指定 类 的 帖子 ， 下 面 讲解 如 何 设置 这 些 帖 子 类 别 。 
| 最 新 帖子 不 需要 任何 设置 ， 只 要 是 帖子 发 布 之 后 ， 自 动 会 生成 一 个 ID 值 , 根据 ID 值 自动 可 以 读 
| 取 到 最 新 的 帖子 。 
| 而 精华 区 、 热 点 区 和 待 回复 则 都 需要 设置 。 其 中 设置 精华 区 和 热点 区 帖子 的 方法 相同 ， 都 是 在 论 
| 坛 的 后 台 管理 中 进行 操作 ， 通 过 form 表单 ， 创 建 复 选 框 ， 将 指定 帖子 的 tb_send_type_distillate 或 者 
| tb_send_type_hotspot 字段 的 值 设 置 为 1， 运行 结果 如 图 23.20 所 示 。 


语 员 篇 加 公 吉 入 理 ”和 类 弄 信 理 ”帖子 售 理 ” 回 钼 管理” 栅 由 管理 “ 音 价 和 家 厂 专区 管理 近 因 可 首页 轨 阴 委员 : stnin 


且 阳 区- ii 加 
再 姑 别 1 
医 EICT 


tat 
搞 作 夺 统 
总 工 设计 
美工 设计 
关 工 设计 
软 科 开发 
多 开发 
凌 T 褒 计 


R 交 :1 7 1 而 记录: 3 杂 


图 23.20 ”帖子 分 类 管理 


帖子 类 别 的 设置 操作 通过 两 个 文件 完成 : 一 个 是 update” forum.php 用 于 提交 要 设置 类 别 帖子 的 
| ID， 另 一 个 是 update_forum_ok.php， 根 据 提交 的 ID 值 执行 设置 帖子 类 别 的 操作 。 
在 update forum.php 文件 中 ， 首 先 创建 一 个 form 表单 ， 从 数据 库 中 读 取 帖子 的 数据 ， 并 且 为 每 
| 个 帖子 设置 一 个 复 选 框 ， 复 选 框 的 值 是 帖子 的 ID。 再 分 别 创建 精华 帖子 和 热点 帖子 的 “提交 ”按钮 ， 
| 同时 也 创建 取消 帖子 类 别 的 按钮 。 最 后 将 数据 提交 到 update_ forum_ok.php 文件 中 。 程 序 关键 代码 如 
| 下 (admin/update forum.php)。 


<form name="forml" method="post" action="update_forum ok.php"> 

<tr> 
<td width="72" height="35" align="center"><span class="STYLE3"> 选 项 。 </span></td> 
<td width="271" align="center"><span class="STYLE3"> 帖 子 主题 </span></td> 
<td width="214" align="center"><span class="STYLE3"> 发 布 人 </span></td> 
<td width="192" align="center"><span class="STYLE3"> 发 布 时 间 </span></td> 
<td width="100" align="center"><span class="STYLE3"> 精 华 区 </span></td> 
<td width="77" align="center"><span class="STYLE3"> 热 点 区 </span></td> 
<td width="77" align="center"><span class="STYLE3"> 是 否 结 帖 </span></td> 

</t> 
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<?php 
这 $_GET[page]){ 
Spage_size=10; // 每 页 显示 两 条 记录 
$query="select count(*) as total from tb forum send where tb_send id ";// 读 取 数 据 
Sresult=mysq]l_query($query); 
Smessage_count=mysql] result($result,0,"total"); / 获取 总 的 记录 数 
Spage_count=ceil($message count/$page size); // 获取 总 的 页 数 
Soffset=($_GET['page']-1)*$page size; | 
Squery=mysql_ query("select * from tb_forum send where tb_send id order by tb send id desc limit Soffset，， 
Spage_size"); | 
while($myrow=mysql fetch array($query){ | 


Vs 
<tr> | 
<td height="25" align="center" class="STYLE1"><input name="<?php echo $myrow[tb_send id];?>" type= ， 
"checkbox" value="<?php echo $myrow[tb_send 1d]:?>"></td> 
<td align="center" class="STYLE1"><?php echo $myrow[tb_send_subject]:;?></td> | 
<td align="center" class="STYLE1"><?php echo Smyrow[tb_send_user];:?></td> | 
<td align="center" class="STYLE1"><?php echo Smyrow[tb_send_date]:?></td> | 
<td align="center" class="STYLE1"><?php echo $myrow[tb_send type_distillate]:?></td> | 
<td align="center" class="STYLE1"><?php echo $myrow[tb_send_type_hotspot]:;?></td> | 
<td align="center" class="STYLE1"><?php if($myrow[tb_forum end]==1){echo "已 结 帖 ";}else{echo "未 结 ， 
帖 ":}?></td> | 
</t> 
<?php }}?> 
<tr> 
<td height="25" align="center">&nbsp;</td> 
<td align="center"><input name="button" type=button class="buttoncss" onClick="checkAll(form!1,status)" 
value=" 全 选 "> 
<input type=button value=" 反 选 " class="buttoncss" onClick="switchAll(forml,status)"> 
<input type=button value=" 不 选 " class="buttoness" onClick="uncheckAll(forml,status)"></td> | 
<td align="center"><input type="submit" name="Submit" value=" 精 华 帖 "> 
<input type="submit" name="Submit3" value=" 取 消 "></td> 
<td align="center"><input type="submit" name="Submit2" value=" 热 门 帖 "> | 
<input type="submit" name="Submit4" value=" 取 消 "></td> | 
<td colspan="3" align="center"><input type="submit" name="Submit5" value=" 结 帖 "> 
<input type="submit" name="Submit6" value=" 取 消 "></td> 
</tr> 
</form> 


在 update_forum_ok.php 文件 中 ， 根 据 表单 中 提交 的 帖子 的 ID 值 ， 通 过 while 语句 和 list() 函 数 ， 
循环 读 取 表单 中 提交 的 帖子 的 卫 值 ， 执 行 设置 帖子 类 别 和 取消 帖子 类 别 的 操作 ， 关 键 代 码 如 下 
(admin/update forum ok.php )。 


<?php session_ start(); include("conn/conn.php"); 
if($Submit==" 精 华 帖 "){ 
while(list($name,$value)=each($_POST)){ 
Sresult=mysql_query("update tb forum send set tb_send type_distillate="1' where tb_send id=".$name.™"); 
if($result==true){ 
echo "<script>alert(' 精 华 帖 激活 成 功 !); window.location.hre 人 >"index.php?title= 帖 子 管理 :</script>";}} 
} 
if($Submit3 一 "取消 "){ 
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的 


while(list($name,$value)=each($ POST)){ 
Sresult=mysql_query("update tb_forum send settb send type_distillate='0' where tb_send id=".$name.""); 
if($result==true){ 
echo "<script>alert(' 精 华 帖 取消 !"); window.location.href="'index.php?title= 帖 子 管理 ':</script>";}} 
} 
?> 


在 设置 帖子 类 别 的 过 程 中 ， 使 用 的 是 批量 更 新 技术 ， 其 主要 通过 while 循环 语句 和 eachO、listO 
| 函数 来 完成 。 
| 加 ”each0 函 数 :， each0 函 数 返回 数组 中 当前 指针 位 置 的 键 名 和 对 应 的 值 ， 并 向 前 移动 数组 指针 。 
键 值 对 被 返回 为 4 个 单元 的 数组 ， 键 名 为 0、1、key 和 value。 单 元 0 和 key 包含 数组 单元 
的 键 名 ，1 和 value 包含 数据 ， 如 果 内 部 指针 越过 了 数组 的 末端 ， 则 函数 返回 false， 基 本 语 
法 如 下 。 
array each( array &S$array ) 


参数 array 为 输入 的 数组 。 

list0 函 数 : list0 函 数 把 数组 中 的 值 赋 给 一 些 变 量 。 与 array0 函 数 类 似 ， 不 是 真正 的 函数 ， 而 
是 语言 结构 。list0 函 数 仅 能 用 于 数字 索引 的 数组 ， 并 且 数 字 索 引 从 0 开始。 基本 语法 如 下 。 

Void list( mixed $varname , mixed $... ) 


参数 mixed 为 被 赋值 的 变量 名 称 。 
| 而 待 回 复 则 是 在 回复 帖子 的 操作 中 完成 的 ， 当 回复 帖子 提交 成 功 后 ， 执 行 更 新 回复 帖子 中 字段 
| tb_send_types 的 值 为 1， 表 明 该 帖子 已 经 有 回复 ， 有 关 程 序 代 码 可 以 参考 前 面 小 节 的 内 容 ， 这 里 不 再 
| 痪 述 。 


23.4.7 ”项 帖 管理 
顶 帖 管理 是 针对 管理 员 的 帖子 置顶 权限 而 设置 的 ， 因 为 不 可 能 将 某 个 帖子 永远 置顶 ， 所 以 创建 了 


| 项 帖 管理 这 个 功能 。 该 功能 存在 于 论坛 的 后 台 管理 中 ， 实 现 帖 子 置 项 和 取消 置顶 的 操作 ， 运 行 结 果 如 
| 图 23.21 所 示 。 


研 风 管理 公告 管理 仙子 具 弛 管理 帖子 管 理 加 由 芝 理 ”而 4 管 理 备份 和 尺 夏 专区 管理 天 回 前台 首页 当前 管理 由: ein 


站 了 主题 发 布 人 发 和 所 属 类 弄 


test 2 21:54:58 EB 


了 加 分 页 方法 1 201¢-00-0¢ 09:15:09 Eg 


于 中 ， 如 局 控 制 上 传 文件 和 大 小 01t-08-01 19:48-23 天 而 


ds n 2016-04-11 11:17:59 秆 页 


页 次 : 1 /1 页 记录 : 4 条 


图 23.21 顶 帖 管理 


| 顶 帖 管理 功能 的 实现 应 用 了 两 个 文件 : 一 个 是 permute_admin.php; 另 一 个 是 update_permute.php。 
| permute_admin.php 用 于 从 数据 库 中 读 取 出 置顶 帖子 的 数据 ， 进 行 分 页 输出 ， 并 且 创建 foum 表单 ， 为 
| 每 个 帖子 设置 一 个 下 拉 列 表 框 , 实现 帖子 置 项 和 取消 置顶 的 操作 , 关键 代码 如 下 (permute_admin.php)。 
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<?php 
这 $_GET[page]){ 

Spage_size=5; // 每 页 显示 两 条 记录 
$query="select count(*) as total from tb forum send where tb_send type=1"; // 从 数据 库 中 读 取 数 据 
Sresult=mysql_query($query); 
$message count=mysql] result($result,0,"total"); / 获取 总 的 记录 数 | 
Spage_count=ceil($message_count/$page size); / 获取 总 的 页 数 
Soffset=($_GET['page']-1)*$page size; | 
Squery=mysql_query("select * from tb forum send where tb_send type=] order by tb _send id desc limit | 

Soffset, $page_size"); | 

while($myrow=mysql fetch array($query){ | 


?> 
<tr> 
<td height="25" align="left">&nbsp;&nbsp;<span class="STYLE1"><?php echo $myrow[tb_send_subject];?> 
</span></td> | 
<td align="center"><span class="STYLE1"><?php echo $myrow[tb_send user];?></span></td> | 
<td align="center"><span class="STYLE1"><?php echo $myrow[tb_send_date];?></span></td> | 
<td align="center"><span class="STYLE1"><?php echo Smyrow[tb_send type];?></span></td> | 
<td align="center"> | 
<form action="update permute php?update id=<?php echo Smyrow[tb send id]:;?>" method="post" name="forml" | 
class="STYLE1"> | 
<select name="tb_send type" id="tb_send _ type"> 
<option value="1"> 置 项 </option> | 
<option value="0"> 取 消 </option> | 
</select> | 
<input type="submit" name="Submit" value=" 执 行 "> 
</form></td> 
</tr> 
<?php } ?> 


在 update_permute.php 文件 中 ， 根 据 表单 中 提交 的 值 和 帖子 ID 的 值 ， 执 行 帖子 置顶 和 取消 置顶 
的 操作 ， 关 键 代码 如 下 (update_permute.php)。 | 


<?php include("../conn/conn.php"); 
$update id=$_GET[update id]; ”// 获取 帖子 的 ID 值 | 
/ 执行 帖子 置顶 或 者 取消 置顶 的 操作 | 
$query=mysql query("update tb_forum send settb_send type=$ POST[tb_send type] where tb_send id='$update id"); 
if($query==true){ 

echo "<script>alert(' 更 新 成 功 !"):history.back(:</script>"; 
}else{ 

echo "<script>alert(' 更 新 失败 1"):history.back():</script>"; 


} 
?> 


回 
视频 讲解 


户 信息 包括 个 人 信息 和 短信 信息 , 在 前 台 导 航 条 中 可 以 进入 。 个 人 信息 在 rework.php 文件 中 设 
计 ， 短 信息 模块 在 send_mailphp 文件 中 进行 管理 ， 在 该 文件 中 完成 我 的 信息 模块 的 操作 ， 其 运行 结 | 
果 如 图 23.22 所 示 。 


23.4.8 ”管理 信息 
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用 让 aie:a 个 人 信忠 今天 是 : st-09-12 条 基于 末了 和 8 若 抽风 友和 天 页 二 出 后 9 六 


我 的 邮箱 


有 


Ed 


千本 ; 未 件 人 的 二 用 阳 户 名 


图 23.22 短信 息 管理 
短信 息 模 块 中 主要 包括 收 件 箱 、 发 件 箱 和 写 信 3 个 功能 。 这 3 个 功能 都 在 send_mail.php 文件 中 


在 send mail.php 文件 中 ， 应 用 switch 语句 ， 根 据 栏 目标 识 的 变量 值 ， 实 现 不 同 功能 之 间 的 切换 
输出 ， 关 键 代 码 如 下 (send_mail.php)。 


<table class="w950 table3 padding6" align="center"> 
<tr><td><?php echo $_GET['sender'];?> 您 好 : 您 现在 有 <?php 
Ssender = $_GET['sender"]; 
Squery=mysql_query("select * from tb mail box where tb_receiving person='$ GET[sender]' and 
tb_mail_type=0"); 
Smyrow=mysql num rows($query); 
echo $myrow; 
?> 条 未 读 信息 ! </td> 
</tr> 
</table> 
<table class="w950 table" align="center"> 
<tr> 
<td width="263" height="39" align="center">&nbsp:&nbsp:&nbsp:&nbsp;<a href="send_mail.php?sender= 
<?php echo $_GET['sender'];?7>&&mails= 收 件 箱 "> 收 件 箱 </a></td> 
<td width="244" align="center"><a href="send mail.php?sender=<?php echo $_ GET['sender'];?> 
&&mails= 发 件 箱 "> 发 件 箱 </a></td> 
<td width="425" align="center"><a href="send mail.php?sender=<?php echo $_GET['sender'];?> 
&&mails= 写 信 '"> 写 信 </a></td> 
</t> 
</table> 
<?php 
这 isset($_ GET[mails])){ 
Smails =$_ GET[mails']: 
jelse{ 
Smails = ""; 
} 
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switch(Smails){ 
ase 
include("write_ mail.php"); break; 
case " 写 信 ": 
include(“write_mail.php"); break; 
case " 收 件 箱 ": 
include("browse_mail.php"); break; 
case "发 件 箱 ": 
include("browse_send_ mail.php"): break; 
1 
?> 


写 信 通 过 write mailLphp 和 write mail ok.php 文件 完成 。 通 过 write_ mail.php 文件 来 创建 form 表 
单 ， 提 交 发 送信 息 的 内 容 。 通 过 write_ mail ok.php 文件 来 对 表单 中 提交 的 内 容 进行 处 理 ， 并 且 将 发 送 | 


信息 存储 到 指定 的 数据 表 中 作为 发 送 记录 。 


收 信 通 过 browse_mailphp、browse_mail contentphp 和 delete_ mailphp 这 3 个 文件 来 完成 。 通 过 
browse_mail.php 文件 从 数据 库 中 读 取出 收 到 信息 的 内 容 ， 将 信息 内 容 进 行 分 页 输出 ， 并 且 设置 超 链 | 


接 ， 链 接 到 browse mail_contentphp 文件 。 在 browse_mail_ contentphp 文件 中 查看 信息 的 详细 内 容 。 
通过 delete_ mailphp 文件 ， 实 现 对 收 信箱 中 的 信息 进行 管理 ， 删 除 指定 的 信息 。 
发 信 通 过 browse_send_mail.php 和 browse_send_mail content php 两 个 文件 来 完成 。 通 过 browse_ 


send_mail.php 文件 输出 数据 库 中 存储 的 发 送 记 录 ， 并 且 根 据 信息 的 标题 进行 分 页 输出 ， 设 置 超 链接 ， 
链接 到 browse_send_mail_ content.php 文件 ， 在 该 文件 中 输出 发 送信 息 的 详细 内 容 。 限 于 篇 幅 ， 上 述 3 | 


个 功能 的 完整 代码 这 里 没有 给 出 ， 完 整 代码 请 参看 本 书 源 代码 中 的 内 容 。 
23.4.9 ”管理 好 友 


我 的 好 友 功 能 也 是 从 send_forum contentphp 文件 中 设置 的 超 链接 开始 。 我 的 好 友 链 接 的 是 
my_friend.php 文件 。 在 该 文件 中 完成 添加 好 友 的 操作 ， 并 且 向 好 友 发 送 一 条 信息 ， 其 运行 结果 如 图 23.23 | 


所 示 。 
PG | cvnocahoxtnv Fiensohoitied Isamesii -BO|B icahort 
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月 记 和。 cin 个 人 信 辕 天 是 ! 06-t0-12 其 区 59 也 06 了 39 本 各 9 友 30 省 页 是 出 Ea 
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EE 
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图 23.23 添加 好 友 


在 my_friend.php 文件 中 ,创建 form 表单 ， 实 现 好 友 的 提交 ， 将 数据 提交 到 my_friend_ok.php 文件 | 
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<?php include("conn/conn php"); 
| 这 !isset($_ SESSION["tb_forum user"] )){ 
天 站 | echo "<script> alert(' 请 先 登 录 后 再 操作 !"); history.back();</script>";} 
~ S$tb_my=$_POST['my']: 
| S$tb_friend=$_POST['friend']; 
S$tb_date=date("Y-m-d"); 
S$tb_receiving person=$ POST['receiving person']; 
S$tb_mail subject=$_ POST[mail subject]; 
| S$tb_mail content=$ POST['mail content]; 
| S$tb_mail sender=$ POST['mail sender]; 
| Stb_mail_date=date("Y-m-d"); 
| $querys=mysql query("select * from tb_forum user where tb forum user='$tb_receiving person"); 
| 这 mysql_num rows(Squerys)>0){ 
| $querys=mysql query("insert into tb_ my friend(tb_ mytb_ friend,tb datejvalues(Stb my'Stb friend,Stb date)); 
| $query=mysql query("insert into tb_mail box(tb receiving person,tb mail subject.tb mail content,tb mail sender, 
| 也 _mail date)values('$tb receiving person','$tb mail subject','$tb mail content','$tb mail sender','$tb mail date")"); 
| if(Squery—true){ 
echo "<script>alert(' 完 成 好 友 添加 ， 并 向 Ta 发 送 一 封 短 息 !"):history.back0; </script>"; 


}else{ 


) 
| echo "<scriptf>alert( 对 不 起 ， 不 存在 该 用 户 !):history.backO;</script>"; 


} 

?> 

在 完成 好 友 的 添加 之 后 ， 在 会 员 登 录 成 功 的 页 面 中 有 一 个 “我 的 好 友 ” 的 超 链接 ， 单 击 该 链接 进 
入 browse_friend.php 文件 中 ， 在 该 文件 中 可 以 查看 到 所 有 的 好 友 。 当 单 击 好 友 的 名 称 时 将 链接 到 
person_data.php 文件 ， 通 过 该 文件 可 以 查看 到 好 友 的 详细 信息 。 在 browse_friend.php 文件 中 ， 还 创建 
了 一 个 form 表单 ， 将 数据 提交 到 delete_friend.php 文件 中 ， 实 现 对 指定 好 友 进 行 删除 的 操作 ， 其 运行 
结果 如 图 23.24 所 示 。 


月 F 归 将 :acei 个 人 信息 “今天 是: 2016-69-12 居多 与 的 由 于 “39 于 所 2 区 条 放下 32) 信和 月” 返 g 首 页 如 4 后 对 理 


我 的 好 友 


13351769 


Hi 


| 图 23.24 好 友 管理 


23.4.10 数据 备份 和 恢复 


| 论坛 中 数据 的 备份 和 恢复 主要 应 用 的 是 exec0 函 数 ， 通 过 该 函数 执行 服务 器 里 的 外 部 程序 ， 实 现 
ed 各 份 数据 和 恢复 数据 的 操作 。 数据 备份 和 恢复 的 运行 结果 如 图 23.25 所 示 。 
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图 23.25 备份 和 恢复 数据 
exec0 函 数 执 行 服务 器 里 的 外 部 程序 ， 基 本 语法 如 下 。 


string exec( string $command [, array &$output [, int &$return var ]] ) 


参数 说 明 如 下 所 示 。 

加 ”command: 必 选 参数 ， 字 符 串 命令 。 

回 output:， 可 选 参数 ， 数 组 输出 。 

回 return_var: 可 选 参数 ， 执 行 命令 返回 来 的 状态 变量 。 | 

在 执行 数据 的 备份 和 恢复 操作 之 前 ,首先 要 确立 与 数据 库 的 连接 ,并 且 要 定义 服务 器 的 目录 ， a 
及 MySQL 命令 执行 文件 的 路 径 ， 程 序 代 码 如 下 (admin/config.php)。 


<?php 

define('PATH',$ SERVER[IDOCUMENT ROOTT); / 服务 器 目录 
define(ROOT'); / 论坛 根 目录 
define(‘ADMIN',admin/"); / 后 台 目 录 
define('BAK','sqlbak/"); / 备份 目录 
define(MYSQLPATH''D:\www\W); /MySQL 执行 文件 路 径 
define(MYSQLDATA','db forum'):; /MySQL 数据 库 
define(MYSQLHOST','localhost'); /MySQL 服务 器 他 
define(MYSQLUSER',root); /MySQL 账号 
define(MYSQLPWD',111111"): /MySQL 密码 

> 


在 确定 了 与 MySQL 数据 库 的 连接 和 执行 文件 的 路 径 之 后 ， 接 下 来 就 可 以 进行 备份 和 恢复 数据 的 
操作 。 

备份 数据 库 主要 应 用 的 是 MySQL 中 的 mysgldump 命令 ， 输 入 MySQL 数据 库 的 用 户 名 (root)、 
服务 器 (localhost) 和 密码 (11111111)， 指 定 要 备份 的 数据 库 (db_fomm)， 确 定数 据 库 备 份 文件 的 
名 称 和 存储 的 位 置 (sglbak/)， 最 后 通过 exec0 函 数 来 执行 这 个 命令 ， 程 序 代码 如 下 (admin/bak_ 
chk.php )。 


<?php 
session start(); // 初始 化 session 变量 
include "config.php"; / 连接 数据 库 
// 编写 备份 数据 库 的 命令 


Smysqlstr = MYSQLPATH.'mysqldump -uMYSQLUSER.' -h MYSQLHOST. -pMYSQLPWD. ' --opt -B 
‘MYSQLDATA.' > 'PATHROOTADMIN .BAK.S_ POST['b name']:; 
exec(Smysqlstr); / 执行 备份 数据 库 的 命令 
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echo "<script>alert( 备 份 成 功 ):location='index.php?title= 备 份 和 恢复 '</script>"; 
?> 


| 恢复 数据 的 操作 使 用 的 是 MySQL 命令 , 输入 MySQL 数据 库 的 用 户 名 (root)、 服务 器 (localhost) 
和 密码 (11111111)， 指 定 要 恢复 的 数据 库 (db_fomm)， 确 定数 据 库 备份 文件 的 名 称 和 存储 的 位 置 
“YY (sqlbak/)， 通 过 execO 函 数 来 执行 命令 ， 程 序 代码 如 下 (admin/rebak chk php )。 
有 
| session start(); / 初始 化 session 变量 
| include "config.php"; / 连接 数据 库 ， 指 定数 据 库 文件 存储 的 位 置 
| / 编写 恢复 数据 库 的 命令 
| Smysqlstr = MYSQLPATHmysql -u.MYSQLUSER.' -h'MYSQLHOST' -p'MYSQLPWD:' 'MYSQLDAIA: < 
| "PATHROOTADMIN.BAK.$_ POST[r name']; 
| exec($mysqlstr); / 执行 恢复 数据 库 操作 的 命令 


echo "<script>alert(' 恢 复 成 功 ");location='index.php?title= 备 份 和 恢复 '</script>"; 
2 
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